jfs-components 0.1.12 → 0.1.17

package/src/components/SuggestiveSearch/SuggestiveSearch.tsx

@@ -184,11 +184,9 @@ const defaultFilter = (query: string, option: SuggestiveSearchOption) =>
 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
@@ -198,8 +196,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)
 
@@ -217,11 +214,9 @@ function useFormFieldTokens(modes: Modes) {
             1.5
         )
         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)
         const inputFontSize = toNumber(
             getVariableByName('formField/input/label/fontSize', modes),
             16
@@ -231,14 +226,11 @@ 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 =
-            (getVariableByName('formField/input/label/fontWeight', modes) as string) ||
-            '400'
+            (getVariableByName('formField/input/label/fontWeight', modes) as string)
         const inputTextColor =
-            (getVariableByName('formField/input/label/color', modes) as string) ||
-            '#24262b'
+            (getVariableByName('formField/input/label/color', modes) as string)
 
         return {
             labelColor,
@@ -265,11 +257,9 @@ function useFormFieldTokens(modes: Modes) {
 function useDropdownItemTextTokens(modes: Modes) {
     return useMemo(() => {
         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 = toNumber(
             getVariableByName('dropdownItem/fontSize', modes),
             16

package/src/components/SupportText/SupportText.tsx

@@ -53,13 +53,13 @@ function SupportText({
     const modes = { ...globalModes, ...propModes };
 
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('supportText/gap', modes), 10) || 4;
+    const gap = parseInt(getVariableByName('supportText/gap', modes), 10);
 
-    const textColor = getVariableByName('supportText/foreground', modes) || '#0c0d10';
-    const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10) || 12;
-    const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10) || 16;
-    const fontWeight = getVariableByName('supportText/fontWeight', modes) || '500';
+    const textColor = getVariableByName('supportText/foreground', modes);
+    const fontFamily = getVariableByName('supportText/fontFamily', modes);
+    const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10);
+    const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10);
+    const fontWeight = getVariableByName('supportText/fontWeight', modes);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {

package/src/components/SupportText/SupportTextIcon.tsx

@@ -29,14 +29,14 @@ function SupportTextIcon({
     const iconName = STATUS_ICON_MAP[status] || 'ic_info';
 
     // Resolve icon size
-    const size = parseInt(getVariableByName('supportText/icon/size', modes), 10) || 16;
+    const size = parseInt(getVariableByName('supportText/icon/size', modes), 10);
 
     // Resolve icon color
     // Assuming supportText/foreground applies to icon as well, or there might be specific icon color tokens.
     // Using supportText/foreground as default based on common patterns if no specific icon token.
     // If specific tokens exist like 'supportText/icon/color', they should be used.
     // Detailed variables only showed supportText/foreground.
-    const color = getVariableByName('supportText/foreground', modes) || '#0c0d10';
+    const color = getVariableByName('supportText/foreground', modes);
 
     return (
         <View style={style}>

package/src/components/Text/Text.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
 import type { Modes } from '../../design-tokens'
@@ -28,10 +28,19 @@ export type TextProps = {
   numberOfLines?: number
   /**
    * When `true`, disables text truncation entirely: the trailing ellipsis (`…`)
-   * is never shown and any `numberOfLines` clamp is ignored, so the text wraps
-   * to as many lines as it needs even when horizontal space is tight.
+   * is never shown and any `numberOfLines` clamp is ignored. The text is also
+   * never shrunk by a tight parent — it keeps its full intrinsic size and
+   * overflows (even breaking the parent layout) rather than clipping into an
+   * ellipsis. It still wraps onto multiple lines.
    */
   disableTruncation?: boolean
+  /**
+   * When `true`, forces the text onto a single line with no wrapping (implies
+   * {@link disableTruncation}). On web the line overflows horizontally —
+   * brutally breaking the parent layout if it has to — instead of wrapping or
+   * truncating.
+   */
+  singleLine?: boolean
   /**
    * Explicit per-instance loading override. When `true`, this `Text` renders
    * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
@@ -66,6 +75,7 @@ function Text({
   style,
   numberOfLines,
   disableTruncation,
+  singleLine,
   loading,
   skeletonWidth,
   skeletonLines,
@@ -128,10 +138,18 @@ function Text({
         ? text
         : 'Korem ipsum '
 
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const { style: layoutStyle, ...truncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines,
+  })
+
   return (
     <RNText
-      style={[textStyle, style]}
-      {...resolveTruncation(disableTruncation, numberOfLines)}
+      style={[textStyle, style, layoutStyle]}
+      {...truncation}
     >
       {content}
     </RNText>

package/src/components/TextInput/TextInput.tsx

@@ -137,18 +137,18 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
   const inputRef = useRef<RNTextInput>(null)
 
   // Resolve container tokens
-  const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5'
-  const borderColor = getVariableByName('textInput/border/color', modes) || '#f5f5f5'
-  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes) || 14
-  const paddingVertical = getVariableByName('textInput/vertical/padding', modes) || 14
-  const radius = getVariableByName('textInput/radius', modes) || 99999
+  const backgroundColor = getVariableByName('textInput/background', modes)
+  const borderColor = getVariableByName('textInput/border/color', modes)
+  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes)
+  const paddingVertical = getVariableByName('textInput/vertical/padding', modes)
+  const radius = getVariableByName('textInput/radius', modes)
 
   // Resolve text input typography tokens
-  const textColor = getVariableByName('textInput/label/color', modes) || '#24262b'
-  const fontSize = getVariableByName('textInput/fontSize', modes) || 14
-  const lineHeight = getVariableByName('textInput/lineHeight', modes) || 18
-  const fontFamily = getVariableByName('textInput/fontFamily', modes) || 'System'
-  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes) || 400
+  const textColor = getVariableByName('textInput/label/color', modes)
+  const fontSize = getVariableByName('textInput/fontSize', modes)
+  const lineHeight = getVariableByName('textInput/lineHeight', modes)
+  const fontFamily = getVariableByName('textInput/fontFamily', modes)
+  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
 
@@ -156,8 +156,8 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
   const placeholderColor = makePlaceholderColor(textColor, 0.6)
 
   // Resolve icon tokens (for default icon rendering if needed)
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+  const iconColor = getVariableByName('textInput/icon/color', modes)
+  const iconSize = getVariableByName('textInput/icon/size', modes)
 
   // Convert radius to React Native format (if 99999, use a large value for fully rounded)
   const borderRadius = radius === 99999 ? 99999 : radius
@@ -346,8 +346,8 @@ const TextInputSearch = forwardRef<RNTextInput, TextInputSearchProps>(function T
   ...rest
 }: TextInputSearchProps, ref: React.Ref<RNTextInput>) {
   // Resolve icon tokens for default search icon
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+  const iconColor = getVariableByName('textInput/icon/color', modes)
+  const iconSize = getVariableByName('textInput/icon/size', modes)
 
   // Use provided leading or default to search icon
   const defaultLeading = (

package/src/components/TextSegment/TextSegment.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTextLayout } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -60,10 +60,19 @@ export type TextSegmentProps = {
   numberOfLines?: number
   /**
    * When `true`, disables truncation entirely: the trailing ellipsis (`…`) is
-   * never shown and the `numberOfLines` clamp is ignored, so the paragraph
-   * wraps to as many lines as it needs even when horizontal space is tight.
+   * never shown and the `numberOfLines` clamp is ignored. The paragraph is also
+   * never shrunk by a tight parent — it keeps its full intrinsic size and
+   * overflows (even breaking the parent layout) rather than clipping into an
+   * ellipsis. It still wraps onto multiple lines.
    */
   disableTruncation?: boolean
+  /**
+   * When `true`, forces the whole paragraph onto a single line with no wrapping
+   * (implies {@link disableTruncation}). On web the line overflows horizontally
+   * — brutally breaking the parent layout if it has to — instead of wrapping or
+   * truncating.
+   */
+  singleLine?: boolean
   /** Mode configuration used for the base style and cascaded to every run/child. */
   modes?: Modes
   /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
@@ -132,6 +141,7 @@ function TextSegment({
   textAlign = 'Left',
   numberOfLines,
   disableTruncation,
+  singleLine,
   modes = EMPTY_MODES,
   style,
 }: TextSegmentProps) {
@@ -163,8 +173,16 @@ function TextSegment({
   // while still honouring any per-child `modes` override.
   const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments
 
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const { style: layoutStyle, ...truncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines,
+  })
+
   return (
-    <RNText style={[baseStyle, style]} {...resolveTruncation(disableTruncation, numberOfLines)}>
+    <RNText style={[baseStyle, style, layoutStyle]} {...truncation}>
       {content}
     </RNText>
   )

package/src/components/ThreadHero/ThreadHero.tsx

@@ -38,29 +38,29 @@ export default function ThreadHero({
     disableTruncation,
 }: ThreadHeroProps) {
     // Container Gaps
-    const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8
-    const detailsGap = Number(getVariableByName('threadHero/details/gap', modes)) || 2
+    const containerGap = Number(getVariableByName('threadHero/gap', modes))
+    const detailsGap = Number(getVariableByName('threadHero/details/gap', modes))
 
     // Title Styles
-    const titleColor = getVariableByName('threadHero/title/color', modes) || '#191b1e'
-    const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes)) || 16
-    const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes) || 'System'
-    const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes)) || 20
-    const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes) || '600'
+    const titleColor = getVariableByName('threadHero/title/color', modes)
+    const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes))
+    const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes)
+    const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes))
+    const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes)
 
     // Subtitle Styles
-    const subtitleColor = getVariableByName('threadHero/subtitle/color', modes) || '#5d5d61'
-    const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes)) || 12
-    const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes) || 'System'
-    const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes)) || 18
-    const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes) || '500'
+    const subtitleColor = getVariableByName('threadHero/subtitle/color', modes)
+    const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes))
+    const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes)
+    const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes))
+    const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes)
 
     // Caption Styles
-    const captionColor = getVariableByName('threadHero/caption/color', modes) || '#5d5d61'
-    const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes)) || 12
-    const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes) || 'System'
-    const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes)) || 18
-    const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes) || '500'
+    const captionColor = getVariableByName('threadHero/caption/color', modes)
+    const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes))
+    const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes)
+    const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes))
+    const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes)
 
     // Styles
     const containerStyle: ViewStyle = {

package/src/components/Title/Title.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type TitleProps = {
@@ -20,9 +20,19 @@ export type TitleProps = {
   /**
    * When `true`, disables truncation for both the title and subtitle: the
    * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
-   * ignored, so the text wraps fully even when horizontal space is tight.
+   * ignored. The text is also never shrunk by a tight parent — it keeps its
+   * full intrinsic size and overflows (even breaking the parent layout) rather
+   * than ever clipping into an ellipsis. The text still wraps onto multiple
+   * lines.
    */
   disableTruncation?: boolean;
+  /**
+   * When `true`, forces both the title and subtitle onto a single line with no
+   * wrapping (implies {@link disableTruncation}). On web the line overflows
+   * horizontally — brutally breaking the parent layout if it has to — instead
+   * of wrapping or truncating.
+   */
+  singleLine?: boolean;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -42,6 +52,7 @@ function Title({
   subtitleStyle,
   numberOfLines,
   disableTruncation,
+  singleLine,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -50,16 +61,16 @@ function Title({
   const modes = { ...globalModes, ...propModes }
 
   const paddingHorizontal =
-    getVariableByName('title/padding/horizontal', modes) || 16
+    getVariableByName('title/padding/horizontal', modes)
   const paddingVertical =
-    getVariableByName('title/padding/vertical', modes) || 8
-  const gap = getVariableByName('title/gap', modes) || 8
+    getVariableByName('title/padding/vertical', modes)
+  const gap = getVariableByName('title/gap', modes)
 
   const labelColor =
-    getVariableByName('title/label/color', modes) || '#0d0d0f'
-  const fontSize = getVariableByName('title/fontSize', modes) || 26
+    getVariableByName('title/label/color', modes)
+  const fontSize = getVariableByName('title/fontSize', modes)
   const rawLineHeight =
-    getVariableByName('title/lineHeight', modes) || 26
+    getVariableByName('title/lineHeight', modes)
   // The Figma title tokens ship with `lineHeight === fontSize` (26/26). On
   // native (especially Android) that produces a Text box exactly `lineHeight`
   // tall, which clips descenders like p/g/y/q/j at the bottom — particularly
@@ -68,28 +79,28 @@ function Title({
   // the original value is preserved.
   const lineHeight = Math.max(rawLineHeight, Math.ceil(fontSize * 1.2))
   const fontFamily =
-    getVariableByName('title/fontFamily', modes) || 'System'
+    getVariableByName('title/fontFamily', modes)
   const fontWeightRaw =
-    getVariableByName('title/fontWeight', modes) || 900
+    getVariableByName('title/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number'
       ? fontWeightRaw.toString()
       : fontWeightRaw
 
   const subtitleColor =
-    getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f'
+    getVariableByName('pageSubtitle/label/color', modes)
   const subtitleFontSize =
-    getVariableByName('pageSubtitle/fontSize', modes) || 14
+    getVariableByName('pageSubtitle/fontSize', modes)
   const subtitleRawLineHeight =
-    getVariableByName('pageSubtitle/lineHeight', modes) || 18
+    getVariableByName('pageSubtitle/lineHeight', modes)
   const subtitleLineHeight = Math.max(
     subtitleRawLineHeight,
     Math.ceil(subtitleFontSize * 1.2)
   )
   const subtitleFontFamily =
-    getVariableByName('pageSubtitle/fontFamily', modes) || 'System'
+    getVariableByName('pageSubtitle/fontFamily', modes)
   const subtitleFontWeightRaw =
-    getVariableByName('pageSubtitle/fontWeight', modes) || 500
+    getVariableByName('pageSubtitle/fontWeight', modes)
   const subtitleFontWeight =
     typeof subtitleFontWeightRaw === 'number'
       ? subtitleFontWeightRaw.toString()
@@ -125,6 +136,20 @@ function Title({
     textAlign: TEXT_ALIGN_MAP[textAlign],
   }
 
+  // `style` from the layout helper must be merged AFTER the consumer override
+  // so the brutal overflow / no-wrap behaviour always wins.
+  const { style: titleLayoutStyle, ...titleTruncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+  })
+  // The subtitle has never been line-clamped, so it only picks up the escape
+  // hatches (overflow / single-line) — `numberOfLines` is intentionally omitted.
+  const { style: subtitleLayoutStyle, ...subtitleTruncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+  })
+
   return (
     <View
       style={[containerStyle, style]}
@@ -134,8 +159,8 @@ function Title({
       {...rest}
     >
       <Text
-        style={[titleTextStyle, textStyle]}
-        {...resolveTruncation(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1)}
+        style={[titleTextStyle, textStyle, titleLayoutStyle]}
+        {...titleTruncation}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >
@@ -143,7 +168,8 @@ function Title({
       </Text>
       {subtitle != null && (
         <Text
-          style={[subtitleTextStyle, subtitleStyle]}
+          style={[subtitleTextStyle, subtitleStyle, subtitleLayoutStyle]}
+          {...subtitleTruncation}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >

package/src/components/Toast/Toast.tsx

@@ -44,21 +44,21 @@ function Toast({
     }
   }, [id, timeout])
 
-  const backgroundColor = getVariableByName('toast/background', modes) || '#303338'
-  const foreground = getVariableByName('toast/foreground', modes) || '#ffffff'
-  const fontSize = getVariableByName('toast/fontSize', modes) || 14
-  const fontFamily = getVariableByName('toast/fontFamily', modes) || undefined
-  const fontWeight = getVariableByName('toast/fontWeight', modes) || '500'
-  const lineHeight = getVariableByName('toast/lineHeight', modes) || 18
-  const radius = getVariableByName('toast/radius', modes) || 14
-  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes) || 16
-  const paddingVertical = getVariableByName('toast/padding/vertical', modes) || 14
-  const gap = getVariableByName('toast/gap', modes) || 8
-  const borderWidth = getVariableByName('toast/border/size', modes) || 1
-  const borderColor = getVariableByName('toast/border/color', modes) || 'rgba(255,255,255,0.1)'
-  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes) || 48
-  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes) || 16
-  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)'
+  const backgroundColor = getVariableByName('toast/background', modes)
+  const foreground = getVariableByName('toast/foreground', modes)
+  const fontSize = getVariableByName('toast/fontSize', modes)
+  const fontFamily = getVariableByName('toast/fontFamily', modes)
+  const fontWeight = getVariableByName('toast/fontWeight', modes)
+  const lineHeight = getVariableByName('toast/lineHeight', modes)
+  const radius = getVariableByName('toast/radius', modes)
+  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('toast/padding/vertical', modes)
+  const gap = getVariableByName('toast/gap', modes)
+  const borderWidth = getVariableByName('toast/border/size', modes)
+  const borderColor = getVariableByName('toast/border/color', modes)
+  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes)
+  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes)
+  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes)
 
   const enterAnimation = placement === 'top'
     ? SlideInUp.duration(ANIMATION_DURATION)

package/src/components/Toggle/Toggle.tsx

@@ -2,12 +2,12 @@ import React, { useCallback, useState } from 'react'
 import {
   Pressable,
   View,
-  Platform,
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
 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'
 
 export interface ToggleProps {
@@ -89,15 +89,10 @@ function Toggle({
     opacity: disabled ? 0.5 : 1,
   }
 
-  const thumbShadow: ViewStyle = Platform.OS === 'web'
-    ? { boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}` } as ViewStyle
-    : {
-      shadowColor: thumbShadowColor as string,
-      shadowOffset: { width: thumbShadowOffsetX as number, height: thumbShadowOffsetY as number },
-      shadowRadius: thumbShadowRadius as number,
-      shadowOpacity: 1,
-      elevation: 4,
-    }
+  const thumbShadow: ViewStyle = boxShadow(
+    `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`,
+    { elevation: 4 },
+  )
 
   const thumbStyle: ViewStyle = {
     width: thumbSize as number,

package/src/components/Tooltip/Tooltip.tsx

@@ -263,18 +263,18 @@ export function TooltipContent({
   const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
 
   // Tokens
-  const bgColor = (getVariableByName('tooltip/background', modes) as string) || '#0f0d0a'
-  const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes) || 12)
-  const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes) || 8)
-  const radius = Number(getVariableByName('radius', modes) || 8)
-  const maxWidthToken = Number(getVariableByName('maxWidth', modes) || 280)
-  const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes) || 16)
-  const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes) || 8)
-  const labelColor = (getVariableByName('tooltip/label/color', modes) as string) || '#ffffff'
-  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes) || 14)
-  const fontWeight = (getVariableByName('tooltip/label/fontWeight', modes) as string) || '500'
-  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes) || 18)
-  const fontFamily = (getVariableByName('tooltip/lable/fontFamily', modes) as string) || undefined
+  const bgColor = (getVariableByName('tooltip/background', modes) as string)
+  const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes))
+  const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes))
+  const radius = Number(getVariableByName('radius', modes))
+  const maxWidthToken = Number(getVariableByName('maxWidth', modes))
+  const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes))
+  const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes))
+  const labelColor = (getVariableByName('tooltip/label/color', modes) as string)
+  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes))
+  const fontWeight = (getVariableByName('tooltip/label/fontWeight', modes) as string)
+  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes))
+  const fontFamily = (getVariableByName('tooltip/lable/fontFamily', modes) as string)
 
   if (!isVisible) return null
 

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -70,21 +70,21 @@ function TransactionBubble({
     'Context3': 'Transaction Bubble',
   }
 
-  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes)) || 16
-  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes)) || 23
-  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes)) || 1
-  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes) || '#ffffff'
-  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes) || '#e5e5e5'
-  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes)) || 8
-  const moneyValueWrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes)) || 8
-
-  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes) || '#24262b'
-  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes)) || 14
-  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes)) || 17
-  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var'
-
-  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes)) || 4
-  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes)) || 18
+  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes))
+  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes))
+  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes))
+  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes)
+  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes)
+  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes))
+  const moneyValueWrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes))
+
+  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes)
+  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes))
+  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes))
+  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes)
+
+  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes))
+  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes))
 
   const containerStyle: ViewStyle = {
     padding,