jfs-components 0.1.12 → 0.1.18

package/lib/module/components/DonutChart/DonutChart.js

@@ -164,17 +164,17 @@ function DonutChart({
   const hasChildrenSlot = customCenterChildren.length > 0;
   const showValueLabel = !hasChildrenSlot && shouldRenderText(value);
   const showLabel = !hasChildrenSlot && shouldRenderText(label);
-  const valueColor = getVariableByName('donutChart/value/color', modes) ?? getVariableByName('value/fg', modes) ?? '#000000';
-  const valueFontFamily = getVariableByName('donutChart/value/fontFamily', modes) ?? getVariableByName('value/fontFamily', modes) ?? '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 valueFontWeight = toFontWeight(getVariableByName('donutChart/value/fontWeight', modes) ?? getVariableByName('value/fontWeight', modes), '900');
-  const labelColor = getVariableByName('donutChart/label/color', modes) ?? getVariableByName('label/fg', modes) ?? '#000000';
-  const labelFontFamily = getVariableByName('donutChart/label/fontFamily', modes) ?? getVariableByName('label/fontFamily', modes) ?? '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 labelFontWeight = toFontWeight(getVariableByName('donutChart/label/fontWeight', modes) ?? getVariableByName('label/fontWeight', modes), '400');
-  const textWrapGap = toNumber(getVariableByName('donutChart/textWrap/gap', modes) ?? getVariableByName('textWrap/gap', modes), 7);
+  const valueColor = getVariableByName('value/fg', modes);
+  const valueFontFamily = getVariableByName('value/fontFamily', modes);
+  const valueFontSize = toNumber(getVariableByName('value/fontSize', modes), 29);
+  const valueLineHeight = toNumber(getVariableByName('value/lineHeight', modes), 29);
+  const valueFontWeight = toFontWeight(getVariableByName('value/fontWeight', modes), '900');
+  const labelColor = getVariableByName('label/fg', modes);
+  const labelFontFamily = getVariableByName('label/fontFamily', modes);
+  const labelFontSize = toNumber(getVariableByName('label/fontSize', modes), 12);
+  const labelLineHeight = toNumber(getVariableByName('label/lineHeight', modes), 15.6);
+  const labelFontWeight = toFontWeight(getVariableByName('label/fontWeight', modes), '400');
+  const textWrapGap = toNumber(getVariableByName('textWrap/gap', modes), 7);
   const containerStyle = {
     alignItems: 'center',
     height: size,

package/lib/module/components/Drawer/Drawer.js

@@ -6,6 +6,7 @@ import { Gesture, GestureDetector, ScrollView } from 'react-native-gesture-handl
 import Animated, { runOnJS, useAnimatedProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring } 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 Overlay from '../Overlay/Overlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
@@ -303,28 +304,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.
@@ -335,26 +337,12 @@ function DrawerInner({
   const shadowSecondaryOffsetX = getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0;
   const shadowSecondaryColor = getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
 
-  // 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 = Platform.select({
-    web: {
-      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
-    },
-    ios: {
-      shadowColor: shadowPrimaryColor,
-      shadowOffset: {
-        width: shadowPrimaryOffsetX,
-        height: shadowPrimaryOffsetY
-      },
-      shadowOpacity: 1,
-      shadowRadius: shadowPrimaryBlur / 2
-    },
-    android: {
-      elevation: 16
-    },
-    default: {}
+  // 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 = boxShadow(`${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`, {
+    elevation: 16
   });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return (
@@ -399,30 +387,42 @@ function DrawerInner({
               borderTopRightRadius: radius,
               paddingLeft,
               paddingRight,
-              paddingBottom,
-              rowGap: drawerGap
+              paddingBottom
             }],
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.handleArea, !title && !header && {
-                paddingBottom: 0
-              }],
-              children: /*#__PURE__*/_jsx(View, {
-                style: [{
-                  backgroundColor: handleColor,
-                  width: handleWidth,
-                  height: handleHeight,
-                  borderRadius: handleRadius
-                }]
-              })
-            }), header, title && /*#__PURE__*/_jsx(Text, {
-              style: [{
-                color: titleColor,
-                fontSize: titleSize,
-                fontWeight: titleWeight,
-                lineHeight: titleLineHeight,
-                marginBottom: titlePaddingBottom
-              }],
-              children: title
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                marginBottom: drawerGap
+              },
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.handleArea, !title && !header && {
+                  marginBottom: drawerGap
+                }],
+                children: /*#__PURE__*/_jsx(View, {
+                  style: [{
+                    backgroundColor: handleColor,
+                    width: handleWidth,
+                    height: handleHeight,
+                    borderRadius: handleRadius
+                  }]
+                })
+              }), header, title && /*#__PURE__*/_jsx(View, {
+                style: {
+                  paddingTop: titleWrapPaddingTop,
+                  paddingBottom: titleWrapPaddingBottom,
+                  paddingHorizontal: titleWrapPaddingHorizontal,
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [{
+                    color: titleColor,
+                    fontSize: titleSize,
+                    fontWeight: titleWeight,
+                    lineHeight: titleLineHeight,
+                    textAlign: 'center'
+                  }],
+                  children: title
+                })
+              })]
             }), /*#__PURE__*/_jsx(AnimatedScrollView, {
               ref: scrollRef,
               style: [styles.content, contentStyle],
@@ -474,7 +474,7 @@ const styles = StyleSheet.create({
   },
   handleArea: {
     alignItems: 'center',
-    paddingVertical: 8,
+    marginTop: 8,
     width: '100%'
   },
   content: {

package/lib/module/components/Dropdown/Dropdown.js

@@ -5,6 +5,7 @@ import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
@@ -21,17 +22,17 @@ function useDropdownItemTokens(modes) {
     const idleBackground = getVariableByName('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Idle'
-    }) || '#ffffff';
+    });
     const selectedBackground = getVariableByName('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Selected'
-    }) || '#f5f5f5';
-    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16;
-    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes) || '400';
-    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19;
-    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8;
+    });
+    const foreground = getVariableByName('dropdownItem/foreground', modes);
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes);
+    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10);
+    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes);
+    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10);
+    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10);
     const paddingHorizontal = parseInt(getVariableByName('dropdownItem/padding/horizontal', modes), 10) || 12;
     const paddingVertical = parseInt(getVariableByName('dropdownItem/padding/vertical', modes), 10) || 12;
     return {
@@ -165,12 +166,12 @@ export function Dropdown({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10) || 8;
-  const background = getVariableByName('dropdown/background', modes) || '#ffffff';
-  const shadowColor = getVariableByName('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
-  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0;
-  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4;
-  const shadowBlur = parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16;
+  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10);
+  const background = getVariableByName('dropdown/background', modes);
+  const shadowColor = getVariableByName('dropdown/shadow/color', modes);
+  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10);
+  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10);
+  const shadowBlur = 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
@@ -179,18 +180,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.
+  // 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 = {
     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/lib/module/components/DropdownInput/DropdownInput.js

@@ -28,8 +28,8 @@ const IS_WEB = Platform.OS === 'web';
 
 function useChevronTokens(modes) {
   return useMemo(() => {
-    const iconSize = parseInt(getVariableByName('input/iconSize', modes), 10) || 32;
-    const iconColor = getVariableByName('iconButton/icon/color', modes) || '#0f0d0a';
+    const iconSize = parseInt(getVariableByName('input/iconSize', modes), 10);
+    const iconColor = getVariableByName('iconButton/icon/color', modes);
     return {
       iconSize,
       iconColor
@@ -46,22 +46,22 @@ function toNumber(value, fallback) {
 }
 function useFormFieldTokens(modes) {
   return useMemo(() => {
-    const labelColor = getVariableByName('formField/label/color', modes) || '#000000';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
-    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
+    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes);
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
     const inputPaddingH = toNumber(getVariableByName('formField/input/padding/horizontal', modes), 12);
     const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
     const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
+    const inputBackground = getVariableByName('formField/input/background', modes);
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
-    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
-    const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes) || '#24262b';
-    const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
+    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes);
+    const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes);
+    const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes);
     // 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/lib/module/components/EmptyState/EmptyState.js

@@ -32,26 +32,26 @@ function EmptyState({
   };
 
   // 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 = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/FilterBar/FilterBar.js

@@ -43,8 +43,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';
   const containerStyle = {
     flexDirection: 'column',

package/lib/module/components/Form/Form.js

@@ -56,9 +56,9 @@ function Form({
     validationErrors,
     onFieldChange
   }), [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 = useMemo(() => ({
     gap,
     paddingHorizontal,

package/lib/module/components/FormField/FormField.js

@@ -33,8 +33,8 @@ function useFormFieldTokens(modes) {
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
 
     // Label (Figma: 14/17 medium, color #0c0d10)
-    const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
     const labelFontWeight = toFontWeight(getVariableByName('formField/label/fontWeight', modes), '500');
@@ -48,10 +48,10 @@ function useFormFieldTokens(modes) {
     // Input text (Figma: 16/45 regular)
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
     const inputFontWeight = toFontWeight(getVariableByName('formField/input/label/fontWeight', modes), '400');
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
-    const inputBorderColor = getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputBackground = getVariableByName('formField/input/background', modes);
+    const inputBorderColor = getVariableByName('formField/input/border/color', modes);
     if (__DEV__) {
       console.warn('[FormField] border color (modes changed)', {
         'FormField States': modes['FormField States'],
@@ -59,7 +59,7 @@ function useFormFieldTokens(modes) {
         'formField/input/border/color': getVariableByName('formField/input/border/color', modes)
       });
     }
-    const inputTextColor = getVariableByName('formField/input/label/color', modes) || '#24262b';
+    const inputTextColor = getVariableByName('formField/input/label/color', modes);
     return {
       gap,
       labelColor,

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -56,39 +56,39 @@ function HeroText({
   modes
 }) {
   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 = {
-      color: getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
-      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700),
-      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      color: getVariableByName('PageHero/eyebrow/color', modes),
+      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)),
       textAlign: 'center'
     };
     const headlineStyle = {
-      color: getVariableByName('PageHero/headline/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
-      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900),
-      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      color: getVariableByName('PageHero/headline/color', modes),
+      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)),
       textAlign: 'center',
       width: '100%'
     };
     const supportingTextStyle = {
-      color: getVariableByName('PageHero/supportingText/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500),
-      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      color: getVariableByName('PageHero/supportingText/color', modes),
+      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)),
       textAlign: 'center'
     };
     const priceTextStyle = {
-      color: getVariableByName('PageHero/body/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/body/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500),
-      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      color: getVariableByName('PageHero/body/color', modes),
+      fontFamily: getVariableByName('PageHero/body/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
       textAlign: 'center'
     };
     return {
@@ -211,7 +211,7 @@ function FullscreenModal({
     ...propModes,
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [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
@@ -225,7 +225,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(() => {
-    const base = Number(getVariableByName('actionFooter/padding/bottom', modes)) || 41;
+    const base = Number(getVariableByName('actionFooter/padding/bottom', modes));
     return {
       paddingBottom: base + insets.bottom
     };

package/lib/module/components/Gauge/Gauge.js

@@ -91,26 +91,26 @@ function Gauge({
   const arcPath = `M ${startX} ${centerY} A ${radius} ${radius} 0 0 1 ${endX} ${centerY}`;
   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');
-  const progressColor = getStrokeColor(progressStyle, getVariableByName('gauge/progress/color', modes) || '#25ab21');
+  const trackColor = getStrokeColor(trackStyle, getVariableByName('gauge/track/color', modes));
+  const progressColor = getStrokeColor(progressStyle, getVariableByName('gauge/progress/color', modes));
   const containerStyle = {
     alignItems: 'center',
     gap,

package/lib/module/components/HoldingsCard/HoldingsCard.js

@@ -38,8 +38,8 @@ export default function HoldingsCard({
   disableTruncation
 }) {
   // ---- 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());
   const containerCornerRadius = parseFloat((getVariableByName('holdingsCard/container/cornerRadius', modes) ?? 16).toString());
   const containerGap = parseFloat((getVariableByName('holdingsCard/container/gap', modes) ?? 10).toString());
@@ -52,26 +52,26 @@ export default function HoldingsCard({
 
   // ---- Hero tokens ----
   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';
+  const heroLabelFontFamily = 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';
+  const heroValueFontFamily = getVariableByName('holdingsCard/hero/value/fontFamily', modes);
   const heroValueLineHeight = parseFloat((getVariableByName('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString());
   const heroValueFontWeight = (getVariableByName('holdingsCard/hero/value/fontWeight', modes) ?? '700').toString();
 
   // ---- Details grid tokens ----
-  const detailLabelColor = getVariableByName('holdingsCard/detailsGrid/label/color', modes) || '#2c251b';
+  const detailLabelColor = 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';
+  const detailLabelFontFamily = getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes);
   const detailLabelLineHeight = parseFloat((getVariableByName('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString());
   const detailLabelFontWeight = (getVariableByName('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString();
-  const detailValueColor = getVariableByName('holdingsCard/detailsGrid/value/color', modes) || '#0f0d0a';
+  const detailValueColor = 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';
+  const detailValueFontFamily = getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes);
   const detailValueLineHeight = parseFloat((getVariableByName('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString());
   const detailValueFontWeight = (getVariableByName('holdingsCard/detailsGrid/value/fontWeight', modes) ?? '500').toString();
   const dataItemGap = parseFloat((getVariableByName('holdingsCard/dataItem/gap', modes) ?? 4).toString());

package/lib/module/components/Icon/Icon.js

@@ -8,12 +8,12 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import BaseIcon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 function resolveIconTokens(modes) {
-  const iconColor = getVariableByName('icon/color', modes) || '#ad8444';
-  const iconSize = getVariableByName('icon/size', modes) || 18;
-  const paddingLeft = getVariableByName('icon/padding/left', modes) || 0;
-  const paddingTop = getVariableByName('icon/padding/top', modes) || 0;
-  const paddingRight = getVariableByName('icon/padding/right', modes) || 0;
-  const paddingBottom = getVariableByName('icon/padding/bottom', modes) || 0;
+  const iconColor = getVariableByName('icon/color', modes);
+  const iconSize = getVariableByName('icon/size', modes);
+  const paddingLeft = getVariableByName('icon/padding/left', modes);
+  const paddingTop = getVariableByName('icon/padding/top', modes);
+  const paddingRight = getVariableByName('icon/padding/right', modes);
+  const paddingBottom = getVariableByName('icon/padding/bottom', modes);
   return {
     containerStyle: {
       flexDirection: 'column',