jfs-components 0.1.12 → 0.1.17

package/src/components/DebitCard/DebitCard.tsx

@@ -45,28 +45,28 @@ function DebitCard({
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
-    const background = getVariableByName('debitCard/background', modes) || '#cea15a'
-    const radius = getVariableByName('debitCard/radius', modes) || 16
-    const width = getVariableByName('debitCard/width', modes) || 328
-    const height = getVariableByName('debitCard/height', modes) || 224
-    const paddingBottom = getVariableByName('debitCard/padding/bottom', modes) || 24
-
-    const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes) || 20
-    const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes) || 16
-    const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes) || 28
-
-    const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes) || 50
-    const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes) || 4
-
-    const footerGap = getVariableByName('debitCard/footer/gap', modes) || 16
-    const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes) || 20
-    const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes) || 16
-
-    const foreground = getVariableByName('debitCard/foreground', modes) || '#141414'
-    const fontSize = getVariableByName('debitCard/fontSize', modes) || 14
-    const fontFamily = getVariableByName('debitCard/fontFamily', modes) || 'JioType Var'
-    const lineHeight = getVariableByName('debitCard/lineHeight', modes) || 17
-    const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes) || 500
+    const background = getVariableByName('debitCard/background', modes)
+    const radius = getVariableByName('debitCard/radius', modes)
+    const width = getVariableByName('debitCard/width', modes)
+    const height = getVariableByName('debitCard/height', modes)
+    const paddingBottom = getVariableByName('debitCard/padding/bottom', modes)
+
+    const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes)
+    const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes)
+    const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes)
+
+    const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes)
+    const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes)
+
+    const footerGap = getVariableByName('debitCard/footer/gap', modes)
+    const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes)
+    const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes)
+
+    const foreground = getVariableByName('debitCard/foreground', modes)
+    const fontSize = getVariableByName('debitCard/fontSize', modes)
+    const fontFamily = getVariableByName('debitCard/fontFamily', modes)
+    const lineHeight = getVariableByName('debitCard/lineHeight', modes)
+    const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes)
     const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
 
     const containerStyle: ViewStyle = {

package/src/components/Disclaimer/Disclaimer.tsx

@@ -47,15 +47,15 @@ function Disclaimer({
   const { modes: globalModes } = useTokens()
   const modes = { ...globalModes, ...propModes }
   // Resolve typography and color from Figma variables
-  const color = getVariableByName('disclaimer/color', modes) || '#24262b'
+  const color = getVariableByName('disclaimer/color', modes)
   const fontSize =
-    getVariableByName('disclaimer/label/fontSize', modes) || 10
+    getVariableByName('disclaimer/label/fontSize', modes)
   const lineHeight =
-    getVariableByName('disclaimer/label/lineHeight', modes) || 12
+    getVariableByName('disclaimer/label/lineHeight', modes)
   const fontFamily =
-    getVariableByName('disclaimer/label/fontFamily', modes) || 'System'
+    getVariableByName('disclaimer/label/fontFamily', modes)
   const fontWeightRaw =
-    getVariableByName('disclaimer/label/fontWeight', modes) || 500
+    getVariableByName('disclaimer/label/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number'
       ? fontWeightRaw.toString()

package/src/components/DonutChart/DonutChart.tsx

@@ -285,59 +285,25 @@ function DonutChart({
     const showValueLabel = !hasChildrenSlot && shouldRenderText(value)
     const showLabel = !hasChildrenSlot && shouldRenderText(label)
 
-    const valueColor =
-        (getVariableByName('donutChart/value/color', modes) as string | null) ??
-        (getVariableByName('value/fg', modes) as string | null) ??
-        '#000000'
-    const valueFontFamily =
-        (getVariableByName('donutChart/value/fontFamily', modes) as string | null) ??
-        (getVariableByName('value/fontFamily', modes) as string | null) ??
-        'JioType Var'
-    const valueFontSize = toNumber(
-        getVariableByName('donutChart/value/fontSize', modes) ??
-            getVariableByName('value/fontSize', modes),
-        29
-    )
-    const valueLineHeight = toNumber(
-        getVariableByName('donutChart/value/lineHeight', modes) ??
-            getVariableByName('value/lineHeight', modes),
-        29
-    )
+    const valueColor = getVariableByName('value/fg', modes) as string
+    const valueFontFamily = getVariableByName('value/fontFamily', modes) as string
+    const valueFontSize = toNumber(getVariableByName('value/fontSize', modes), 29)
+    const valueLineHeight = toNumber(getVariableByName('value/lineHeight', modes), 29)
     const valueFontWeight = toFontWeight(
-        getVariableByName('donutChart/value/fontWeight', modes) ??
-            getVariableByName('value/fontWeight', modes),
+        getVariableByName('value/fontWeight', modes),
         '900'
     )
 
-    const labelColor =
-        (getVariableByName('donutChart/label/color', modes) as string | null) ??
-        (getVariableByName('label/fg', modes) as string | null) ??
-        '#000000'
-    const labelFontFamily =
-        (getVariableByName('donutChart/label/fontFamily', modes) as string | null) ??
-        (getVariableByName('label/fontFamily', modes) as string | null) ??
-        'JioType Var'
-    const labelFontSize = toNumber(
-        getVariableByName('donutChart/label/fontSize', modes) ??
-            getVariableByName('label/fontSize', modes),
-        12
-    )
-    const labelLineHeight = toNumber(
-        getVariableByName('donutChart/label/lineHeight', modes) ??
-            getVariableByName('label/lineHeight', modes),
-        15.6
-    )
+    const labelColor = getVariableByName('label/fg', modes) as string
+    const labelFontFamily = getVariableByName('label/fontFamily', modes) as string
+    const labelFontSize = toNumber(getVariableByName('label/fontSize', modes), 12)
+    const labelLineHeight = toNumber(getVariableByName('label/lineHeight', modes), 15.6)
     const labelFontWeight = toFontWeight(
-        getVariableByName('donutChart/label/fontWeight', modes) ??
-            getVariableByName('label/fontWeight', modes),
+        getVariableByName('label/fontWeight', modes),
         '400'
     )
 
-    const textWrapGap = toNumber(
-        getVariableByName('donutChart/textWrap/gap', modes) ??
-            getVariableByName('textWrap/gap', modes),
-        7
-    )
+    const textWrapGap = toNumber(getVariableByName('textWrap/gap', modes), 7)
 
     const containerStyle: ViewStyle = {
         alignItems: 'center',

package/src/components/Drawer/Drawer.tsx

@@ -15,6 +15,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import type { Modes } from '../../design-tokens'
 import Overlay from '../Overlay/Overlay'
 
@@ -390,28 +391,29 @@ function DrawerInner({
   })
 
   // Design Tokens
-  const backgroundColor = getVariableByName('drawer/background', modes) || '#f5f5f5'
-  const radius = getVariableByName('drawer/radius/top', modes) || 12
+  const backgroundColor = getVariableByName('drawer/background', modes)
+  const radius = getVariableByName('drawer/radius/top', modes)
 
   // Handle
-  const handleColor = getVariableByName('drawer/handlebar/background', modes) || '#e0e0e3'
-  const handleWidth = getVariableByName('drawer/handlebar/width', modes) || 42
-  const handleHeight = getVariableByName('drawer/handlebar/height', modes) || 6
-  const handleRadius = getVariableByName('drawer/handlebar/radius', modes) || 999
+  const handleColor = getVariableByName('drawer/handlebar/background', modes)
+  const handleWidth = getVariableByName('drawer/handlebar/width', modes)
+  const handleHeight = getVariableByName('drawer/handlebar/height', modes)
+  const handleRadius = getVariableByName('drawer/handlebar/radius', modes)
 
   // Padding
-  const paddingLeft = getVariableByName('drawer/padding/left', modes) || 8
-  const paddingRight = getVariableByName('drawer/padding/right', modes) || 8
-  const paddingBottom = getVariableByName('drawer/padding/bottom', modes) || 10
-  const drawerGap = getVariableByName('drawer/gap', modes) || 8
-  // Note: drawer/padding/top is 0 in tokens, but we keep the 8px visual spacing for the handle as requested.
+  const paddingLeft = getVariableByName('drawer/padding/left', modes)
+  const paddingRight = getVariableByName('drawer/padding/right', modes)
+  const paddingBottom = getVariableByName('drawer/padding/bottom', modes)
+  const drawerGap = getVariableByName('drawer/gap', modes)
 
   // Title
-  const titleColor = getVariableByName('drawer/title/color', modes) || '#0d0d0f'
-  const titleSize = getVariableByName('drawer/title/fontSize', modes) || 14
-  const titleWeight = getVariableByName('drawer/title/fontWeight', modes) || '700'
-  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17
-  const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8
+  const titleColor = getVariableByName('drawer/title/color', modes)
+  const titleSize = getVariableByName('drawer/title/fontSize', modes)
+  const titleWeight = getVariableByName('drawer/title/fontWeight', modes)
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes)
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes)
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes)
+  const titleWrapPaddingHorizontal = getVariableByName('drawer/titleWrap/padding/horizontal', modes)
 
   // Drop shadow — Figma layers two shadows (primary + secondary) sharing
   // the same offsetY/blur but with their own offsetX and color.
@@ -422,26 +424,15 @@ function DrawerInner({
   const shadowSecondaryOffsetX = (getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0) as number
   const shadowSecondaryColor = (getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)') as string
 
-  // Cross-platform shadow style. Web supports stacking two shadows via
-  // boxShadow. iOS only supports a single native shadow per view, so we
-  // apply the more prominent (primary) one. Android uses elevation.
-  const shadowStyle: ViewStyle = Platform.select({
-    web: {
-      boxShadow:
-        `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` +
-        `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`,
-    } as ViewStyle,
-    ios: {
-      shadowColor: shadowPrimaryColor,
-      shadowOffset: { width: shadowPrimaryOffsetX, height: shadowPrimaryOffsetY },
-      shadowOpacity: 1,
-      shadowRadius: shadowPrimaryBlur / 2,
-    },
-    android: {
-      elevation: 16,
-    },
-    default: {},
-  }) as ViewStyle
+  // Cross-platform shadow via the unified helper. Figma layers two shadows
+  // (secondary + primary) which stack natively as a single multi-layer
+  // boxShadow on web + RN 0.76+. On older RN the helper falls back to the most
+  // prominent layer (iOS shadow*) / a fixed elevation (Android).
+  const shadowStyle: ViewStyle = boxShadow(
+    `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` +
+      `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`,
+    { elevation: 16 },
+  )
 
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer'
 
@@ -491,44 +482,62 @@ function DrawerInner({
                 paddingLeft,
                 paddingRight,
                 paddingBottom,
-                rowGap: drawerGap,
               },
             ]}
           >
-            {/* Handle Area */}
-            <View style={[styles.handleArea, (!title && !header) && { paddingBottom: 0 }]}>
-              <View
-                style={[
-                  {
-                    backgroundColor: handleColor,
-                    width: handleWidth,
-                    height: handleHeight,
-                    borderRadius: handleRadius
-                  },
-                ]}
-              />
+            {/* Header unit — handle + optional header + title behave as ONE
+                block. The core gap (drawer/gap) is intentionally NOT applied
+                between the handle and the title; it is applied only once, below
+                this whole unit, to separate it from the scrollable content. */}
+            <View style={{ marginBottom: drawerGap }}>
+              {/* Handle Area. The handle owns an extra bottom margin ONLY when
+                  it is the sole header element (no title / no header slot) so
+                  that handle↔content resolves to handleMargin(8) + coreGap(8) =
+                  16. When a title/header follows, the title wrapper's own top
+                  padding provides the handle↔title spacing instead. */}
+              <View style={[styles.handleArea, (!title && !header) && { marginBottom: drawerGap }]}>
+                <View
+                  style={[
+                    {
+                      backgroundColor: handleColor,
+                      width: handleWidth,
+                      height: handleHeight,
+                      borderRadius: handleRadius
+                    },
+                  ]}
+                />
+              </View>
+
+              {/* Custom Header Slot */}
+              {header}
+
+              {/* Title (Legacy/Simple Mode) — centered per design */}
+              {title && (
+                <View
+                  style={{
+                    paddingTop: titleWrapPaddingTop,
+                    paddingBottom: titleWrapPaddingBottom,
+                    paddingHorizontal: titleWrapPaddingHorizontal,
+                    alignItems: 'center',
+                  }}
+                >
+                  <Text
+                    style={[
+                      {
+                        color: titleColor,
+                        fontSize: titleSize,
+                        fontWeight: titleWeight as any,
+                        lineHeight: titleLineHeight,
+                        textAlign: 'center',
+                      },
+                    ]}
+                  >
+                    {title}
+                  </Text>
+                </View>
+              )}
             </View>
 
-            {/* Custom Header Slot */}
-            {header}
-
-            {/* Title (Legacy/Simple Mode) */}
-            {title && (
-              <Text
-                style={[
-                  {
-                    color: titleColor,
-                    fontSize: titleSize,
-                    fontWeight: titleWeight as any,
-                    lineHeight: titleLineHeight,
-                    marginBottom: titlePaddingBottom,
-                  }
-                ]}
-              >
-                {title}
-              </Text>
-            )}
-
             {/* Scrollable Content */}
             <AnimatedScrollView
               ref={scrollRef}
@@ -579,8 +588,8 @@ const styles = StyleSheet.create({
   },
   handleArea: {
     alignItems: 'center',
-    paddingVertical: 8,
-    width: '100%'
+    marginTop: 8,
+    width: '100%',
   },
 
   content: {

package/src/components/Dropdown/Dropdown.tsx

@@ -14,6 +14,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
 
@@ -74,26 +75,23 @@ function useDropdownItemTokens(modes: Modes) {
             (getVariableByName('dropdownItem/background', {
                 ...modes,
                 'Dropdown Item State': 'Idle',
-            }) as string) || '#ffffff'
+            }) as string)
         const selectedBackground =
             (getVariableByName('dropdownItem/background', {
                 ...modes,
                 'Dropdown Item State': 'Selected',
-            }) as string) || '#f5f5f5'
+            }) as string)
         const foreground =
-            (getVariableByName('dropdownItem/foreground', modes) as string) ||
-            '#000000'
+            (getVariableByName('dropdownItem/foreground', modes) as string)
         const fontFamily =
-            (getVariableByName('dropdownItem/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('dropdownItem/fontFamily', modes) as string)
         const fontSize =
-            parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16
+            parseInt(getVariableByName('dropdownItem/fontSize', modes), 10)
         const fontWeight =
-            (getVariableByName('dropdownItem/fontWeight', modes) as string) ||
-            '400'
+            (getVariableByName('dropdownItem/fontWeight', modes) as string)
         const lineHeight =
-            parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19
-        const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8
+            parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10)
+        const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10)
         const paddingHorizontal =
             parseInt(
                 getVariableByName('dropdownItem/padding/horizontal', modes),
@@ -285,18 +283,17 @@ export function Dropdown({
     )
 
     const radius =
-        parseInt(getVariableByName('dropdown/radius', modes), 10) || 8
+        parseInt(getVariableByName('dropdown/radius', modes), 10)
     const background =
-        (getVariableByName('dropdown/background', modes) as string) || '#ffffff'
+        (getVariableByName('dropdown/background', modes) as string)
     const shadowColor =
-        (getVariableByName('dropdown/shadow/color', modes) as string) ||
-        'rgba(0, 0, 0, 0.08)'
+        (getVariableByName('dropdown/shadow/color', modes) as string)
     const shadowOffsetX =
-        parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0
+        parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10)
     const shadowOffsetY =
-        parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4
+        parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10)
     const shadowBlur =
-        parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16
+        parseInt(getVariableByName('dropdown/shadow/blur', modes), 10)
 
     // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
     // On native, clipping a view also clips its shadow (iOS clips the layer
@@ -305,18 +302,16 @@ export function Dropdown({
     // get cut off. The rounded-corner clipping is moved to a separate inner
     // view below.
     //
-    // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
-    // single source of truth so the designed color/offset/blur are honored on
-    // iOS, Android AND web. We intentionally do NOT also set the legacy
-    // `shadow*` / `elevation` props: on the new architecture (and web) those
-    // are translated into a box-shadow internally, so combining them with an
-    // explicit `boxShadow` would stack two shadows. Android's legacy
-    // `elevation` is also undesirable here because it ignores the shadow color
-    // and only paints a generic gray shadow.
-    const shadowStyle: ViewStyle & { boxShadow?: string } = {
+    // The unified `boxShadow` helper is the single source of truth so the
+    // designed color/offset/blur are honored on iOS, Android AND web. On RN
+    // 0.76+ / web it emits the spec `boxShadow` prop; on older RN it translates
+    // to the legacy `shadow*` (iOS) / `elevation` (Android) API. We intentionally
+    // do NOT also set the legacy props manually on the supported path: those
+    // would stack a second shadow.
+    const shadowStyle: ViewStyle = {
         backgroundColor: background,
         borderRadius: radius,
-        boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`,
+        ...boxShadow(`${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`),
     }
 
     // Inner view carries the rounded corners + clipping so list/scroll content

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,