jfs-components 0.1.12 → 0.1.17

package/src/components/CardFeedback/CardFeedback.tsx

@@ -41,11 +41,11 @@ export function CardFeedback({
         ...propModes,
     };
     // Container Tokens
-    const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
-    const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
-    const gap = parseFloat(getVariableByName('cardFeedback/gap', modes) || '8');
-    const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes) || '12');
-    const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes) || '12');
+    const backgroundColor = getVariableByName('cardFeedback/background', modes);
+    const radius = parseFloat(getVariableByName('cardFeedback/radius', modes));
+    const gap = parseFloat(getVariableByName('cardFeedback/gap', modes));
+    const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes));
+    const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes));
 
     const containerStyle: ViewStyle = {
         backgroundColor,
@@ -80,7 +80,7 @@ export function Icon({ children, style, modes: propModes, icon }: { children?: R
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20');
+    const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes));
     // Color for the icon itself
     const color = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes);
     console.log(color);
@@ -120,7 +120,7 @@ export function Content({ children, style, modes: propModes }: { children?: Reac
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
+    const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes));
 
     // Pass modes to children (Title, Body, etc.)
     const childrenWithModes = React.Children.map(children, child => {
@@ -145,11 +145,11 @@ export function Title({ children, style, modes: propModes }: { children?: React.
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('cardFeedback/title/color', modes) || '#0f0d0a';
-    const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes) || '14');
-    const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes) || '17');
-    const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes) || '500';
+    const color = getVariableByName('cardFeedback/title/color', modes);
+    const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes));
+    const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes));
+    const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes);
 
     const textStyle: TextStyle = {
         color,
@@ -170,11 +170,11 @@ export function Body({ children, style, modes: propModes }: { children?: React.R
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('cardFeedback/body/color', modes) || '#1f1a14';
-    const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes) || '12');
-    const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes) || '16');
-    const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes) || '400';
+    const color = getVariableByName('cardFeedback/body/color', modes);
+    const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes));
+    const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes));
+    const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes);
 
     const textStyle: TextStyle = {
         color,
@@ -195,7 +195,7 @@ export function Action({ children, style, modes: propModes }: { children?: React
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
-    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0');
+    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes));
 
     // "Maximise existing component usage" -> Pass modes to children (Buttons)
     const childrenWithModes = React.Children.map(children, child => {

package/src/components/CardFinancialCondition/CardFinancialCondition.tsx

@@ -104,8 +104,7 @@ function resolveCardFinancialConditionTokens(
   modes: Modes
 ): CardFinancialConditionTokens {
   const background =
-    (getVariableByName('financialConditionCard/background', modes) as string) ||
-    '#ffffff'
+    (getVariableByName('financialConditionCard/background', modes) as string)
   const radius = toNumber(
     getVariableByName('financialConditionCard/radius', modes),
     16
@@ -133,8 +132,7 @@ function resolveCardFinancialConditionTokens(
   )
 
   const titleColor =
-    (getVariableByName('financialConditionCard/title/color', modes) as string) ||
-    '#0c0d10'
+    (getVariableByName('financialConditionCard/title/color', modes) as string)
   const titleFontSize = toNumber(
     getVariableByName('financialConditionCard/title/fontSize', modes),
     16
@@ -143,7 +141,7 @@ function resolveCardFinancialConditionTokens(
     (getVariableByName(
       'financialConditionCard/title/fontFamily',
       modes
-    ) as string) || 'JioType Var'
+    ) as string)
   const titleLineHeight = toNumber(
     getVariableByName('financialConditionCard/title/lineHeight', modes),
     18
@@ -154,8 +152,7 @@ function resolveCardFinancialConditionTokens(
   )
 
   const bodyColor =
-    (getVariableByName('financialConditionCard/body/color', modes) as string) ||
-    '#0c0d10'
+    (getVariableByName('financialConditionCard/body/color', modes) as string)
   const bodyFontSize = toNumber(
     getVariableByName('financialConditionCard/body/fontSize', modes),
     14
@@ -164,7 +161,7 @@ function resolveCardFinancialConditionTokens(
     (getVariableByName(
       'financialConditionCard/body/fontFamily',
       modes
-    ) as string) || 'JioType Var'
+    ) as string)
   const bodyLineHeight = toNumber(
     getVariableByName('financialConditionCard/body/lineHeight', modes),
     17
@@ -175,13 +172,13 @@ function resolveCardFinancialConditionTokens(
   )
 
   const nudgeBodyColor =
-    (getVariableByName('nudge/body/color', modes) as string) || '#1a1c1f'
+    (getVariableByName('nudge/body/color', modes) as string)
   const nudgeBodyFontSize = toNumber(
     getVariableByName('nudge/body/fontSize', modes),
     12
   )
   const nudgeBodyFontFamily =
-    (getVariableByName('nudge/body/fontFamily', modes) as string) || 'JioType Var'
+    (getVariableByName('nudge/body/fontFamily', modes) as string)
   const nudgeBodyLineHeight = toNumber(
     getVariableByName('nudge/body/lineHeight', modes),
     16

package/src/components/CardInsight/CardInsight.tsx

@@ -83,7 +83,6 @@ function CardInsight({
     const gap = (getVariableByName('cardInsight/gap', modes) as number | null) ?? 12
     const contentGap =
         (getVariableByName('cardInsight/contentGap', modes) as number | null) ?? 8
-    const width = (getVariableByName('cardInsight/width', modes) as number | null) ?? 356
     const slotBackground =
         (getVariableByName('cardInsight/slot/background', modes) as string | null) ?? '#ffffff'
 
@@ -129,7 +128,7 @@ function CardInsight({
 
     const renderSlot = (): React.ReactNode => {
         if (!children) {
-            return <SavingsGoalSummary modes={modes} />
+            return <SavingsGoalSummary label="Credit usage" modes={modes} />
         }
         const processed = cloneChildrenWithModes(children, modes)
         return processed.length === 1 ? processed[0] : processed
@@ -165,7 +164,6 @@ function CardInsight({
         <View
             style={[
                 {
-                    width,
                     backgroundColor: background,
                     borderRadius: radius,
                     borderWidth,

package/src/components/Carousel/Carousel.tsx

@@ -65,6 +65,16 @@ export interface CarouselProps {
   gap?: number
   /** Width of each carousel item. When undefined, items take full container width. */
   itemWidth?: number
+  /**
+   * Explicit horizontal padding (px) for the scroll content. When provided it
+   * overrides the token-derived padding verbatim — the built-in `carousel/
+   * padding/horizontal × 2` "peek" multiplier is NOT applied. Use this for
+   * presets (e.g. the account-card strip) whose own tokens define a flush,
+   * non-peeking layout.
+   */
+  paddingHorizontal?: number
+  /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
+  paddingVertical?: number
 
   /** Called when the active index changes. */
   onIndexChange?: (index: number) => void
@@ -85,27 +95,29 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
 
   onIndexChange,
   style,
 }: CarouselProps) {
   // ---- Token resolution ----
   const tokenGap = parseFloat(
-    getVariableByName('carousel/gap', modes) || '12',
+    getVariableByName('carousel/gap', modes),
   )
   const gap = gapProp ?? tokenGap
 
 
 
   const containerPaddingH = parseFloat(
-    getVariableByName('carousel/padding/horizontal', modes) || '0',
+    getVariableByName('carousel/padding/horizontal', modes),
   )
   const containerPaddingV = parseFloat(
-    getVariableByName('carousel/padding/vertical', modes) || '0',
+    getVariableByName('carousel/padding/vertical', modes),
   )
   // Outer container max height per Figma (`carousel/maxHeight`).
   const maxHeight = parseFloat(
-    getVariableByName('carousel/maxHeight', modes) || '280',
+    getVariableByName('carousel/maxHeight', modes),
   )
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap
@@ -254,13 +266,18 @@ export function Carousel({
   )
 
   // ---- Render ----
+  // Explicit padding props win verbatim; otherwise fall back to the
+  // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
+  const effectivePaddingH = paddingHorizontalProp ?? containerPaddingH 
+  const effectivePaddingV = paddingVerticalProp ?? containerPaddingV
+
   const outerStyle: ViewStyle = {
-    paddingVertical: containerPaddingV,
+    paddingVertical: effectivePaddingV,
     maxHeight,
   }
 
   const contentContainerStyle: ViewStyle = {
-    paddingHorizontal: containerPaddingH * 2,
+    paddingHorizontal: effectivePaddingH,
     gap,
     // Align items to the start so snap works correctly
     alignItems: 'flex-start',
@@ -372,26 +389,26 @@ export function Pagination({ modes: propModes, style }: PaginationProps) {
   // Token resolution for dots — matches Figma tokens
   // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
   const dotSize = parseFloat(
-    getVariableByName('carousel/pagination/indicator/size', modes) || '6',
+    getVariableByName('carousel/pagination/indicator/size', modes),
   )
   const dotActiveWidth = parseFloat(
-    getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16',
+    getVariableByName('carousel/pagination/indicator/activeWidth', modes),
   )
   const dotGap = parseFloat(
-    getVariableByName('carousel/pagination/gap', modes) || '4',
+    getVariableByName('carousel/pagination/gap', modes),
   )
   const dotColor =
     (getVariableByName(
       'carousel/pagination/indicator/inactiveColor',
       modes,
-    ) as string) || 'rgba(0,0,0,0.3)'
+    ) as string)
   const dotActiveColor =
     (getVariableByName(
       'carousel/pagination/indicator/activeColor',
       modes,
-    ) as string) || '#170d0a'
+    ) as string)
   const dotRadius = parseFloat(
-    getVariableByName('carousel/pagination/indicator/radius', modes) || '9999',
+    getVariableByName('carousel/pagination/indicator/radius', modes),
   )
 
   const containerStyle: ViewStyle = {

package/src/components/CarouselCardAccounts/CarouselCardAccounts.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+import Carousel from '../Carousel/Carousel'
+
+// Figma reference width for a single Account Card slot (`Carousel / Card Accounts`).
+const DEFAULT_ITEM_WIDTH = 125
+
+const toNumber = (value: unknown, fallback: number): number => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+  return fallback
+}
+
+export interface CarouselCardAccountsProps {
+  /**
+   * The account cards to render — this is the slot. Pass any number of
+   * `AccountCard` elements (or any node). Each becomes one horizontally
+   * scrollable, snap-aligned item. `modes` are forwarded to every child.
+   */
+  children?: React.ReactNode
+  /** Design-token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Modes
+  /**
+   * Width of each card slot in px. Defaults to the Figma reference width
+   * (`125`). Combined with `gap` this drives the per-card snap interval.
+   */
+  itemWidth?: number
+  /**
+   * Gap between cards in px. Resolved from the `carouselCardAccounts/gap`
+   * token (default `8`) when omitted.
+   */
+  gap?: number
+  /**
+   * Show the pagination dots. Defaults to `false` — the account strip is a
+   * flush, free-scrolling row rather than a paged hero carousel.
+   */
+  showPagination?: boolean
+  /** Loop back to the first card after the last. Default: `false`. */
+  loop?: boolean
+  /** Called when the active (snapped) card index changes. */
+  onIndexChange?: (index: number) => void
+  /** Style override for the outermost container. */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * `CarouselCardAccounts` — a horizontally scrollable strip of compact
+ * `AccountCard`s (the Figma "Carousel / Card Accounts" component).
+ *
+ * It is a thin, opinionated preset over the shared {@link Carousel} scroll
+ * engine — so the snap/scroll/modes-cascade behaviour is **not** duplicated.
+ * Its niche is the account-selection strip: fixed-width card slots, flush
+ * (no peek) padding, per-card snapping, and no pagination by default.
+ *
+ * The cards are a real slot: pass any number of `AccountCard` children
+ * (typically a list of `connected` cards followed by a single `add` card).
+ *
+ * @example
+ * <CarouselCardAccounts modes={modes}>
+ *   <AccountCard title="Personal account" subtitle="**** 5651" imageSource={art} />
+ *   <AccountCard title="Salary account" subtitle="**** 1180" imageSource={art} />
+ *   <AccountCard state="add" title="Add a card" onPress={openLinkFlow} />
+ * </CarouselCardAccounts>
+ */
+function CarouselCardAccounts({
+  children,
+  modes = EMPTY_MODES,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  gap: gapProp,
+  showPagination = false,
+  loop = false,
+  onIndexChange,
+  style,
+}: CarouselCardAccountsProps) {
+  const gap = gapProp ?? toNumber(getVariableByName('carouselCardAccounts/gap', modes), 8)
+
+  // Outer-container padding is driven by the design's own tokens
+  // (`carouselCardAccounts/padding/*`) rather than the generic `carousel/*`
+  // padding, matching the Figma "Carousel / Card Accounts" frame.
+  const paddingHorizontal = toNumber(
+    getVariableByName('carouselCardAccounts/padding/horizontal', modes),
+    0,
+  )
+  const paddingVertical = toNumber(
+    getVariableByName('carouselCardAccounts/padding/vertical', modes),
+    0,
+  )
+
+  return (
+    <Carousel
+      modes={modes}
+      itemWidth={itemWidth}
+      gap={gap}
+      showPagination={showPagination}
+      loop={loop}
+      autoPlay={false}
+      paddingHorizontal={paddingHorizontal}
+      paddingVertical={paddingVertical}
+      {...(onIndexChange ? { onIndexChange } : {})}
+      style={style}
+    >
+      {children}
+    </Carousel>
+  )
+}
+
+export default React.memo(CarouselCardAccounts)

package/src/components/Checkbox/Checkbox.tsx

@@ -9,6 +9,7 @@ import {
 import Svg, { Path } from 'react-native-svg'
 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'
 
 /**
@@ -116,7 +117,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
 
   const size = getVariableByName('checkbox/size', modes) ?? 18
   const radius = getVariableByName('checkbox/radius', modes) ?? 4
-  const strokeWidth = getVariableByName('strokeWidth', modes) ?? 1
+  const strokeWidth = 1
 
   const idleStroke = getVariableByName('checkbox/idle/stroke/color', modes) ?? '#666666'
   const hoverFill = getVariableByName('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)'
@@ -256,11 +257,4 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
   )
 })
 
-function boxShadow(value: string): ViewStyle {
-  if (Platform.OS === 'web') {
-    return { boxShadow: value } as ViewStyle
-  }
-  return {}
-}
-
 export default Checkbox

package/src/components/ChipGroup/ChipGroup.tsx

@@ -36,7 +36,7 @@ function ChipGroup({
     testID,
 }: ChipGroupProps) {
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8;
+    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {

package/src/components/ChipSelect/ChipSelect.tsx

@@ -60,23 +60,23 @@ function ChipSelect({
     };
 
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4;
-    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
-    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0;
-    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999;
+    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10);
+    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10);
+    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10);
+    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10);
 
     // Background
-    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5';
+    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes);
 
     // Text Styles
-    const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f';
-    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14;
-    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
-    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32;
-    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700';
+    const textColor = getVariableByName('chipSelect/foreground', resolvedModes);
+    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10);
+    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes);
+    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10);
+    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes);
 
     // Icon Styles
-    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10) || 16;
+    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -126,18 +126,18 @@ function CircularProgressBar({
 
   const trackColor = getStrokeColor(
     trackStyle,
-    getVariableByName('circularProgressBar/track/color', trackModes) as string || '#ebebed'
+    getVariableByName('circularProgressBar/track/color', trackModes)
   )
   const progressColor = getStrokeColor(
     progressStyle,
-    getVariableByName('circularProgressBar/progress/color', modes) as string || '#25ab21'
+    getVariableByName('circularProgressBar/progress/color', modes)
   )
-  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) as string || '#666666'
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes)
   const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24)
 
-  const foreground = getVariableByName('circularProgressBar/foreground', modes) as string || '#0d0d0f'
+  const foreground = getVariableByName('circularProgressBar/foreground', modes)
   const fontSize = toNumber(getVariableByName('circularProgressBar/value/fontSize', modes), 18)
-  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) as string || 'JioType Var'
+  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes)
   const lineHeight = toNumber(getVariableByName('circularProgressBar/value/lineHeight', modes), 21)
   const fontWeight = toFontWeight(getVariableByName('circularProgressBar/value/fontWeight', modes), '700')
 

package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx

@@ -147,11 +147,11 @@ function CircularProgressBarDoted({
 
   const trackDotColor = getBackgroundColor(
     trackDotStyle,
-    getVariableByName('circularProgressBarDoted/trackDot/bg', modes) as string || '#ebebed'
+    getVariableByName('circularProgressBarDoted/trackDot/bg', modes)
   )
   const progressDotColor = getBackgroundColor(
     progressDotStyle,
-    getVariableByName('circularProgressBarDoted/progressDot/bg', modes) as string || '#25ab21'
+    getVariableByName('circularProgressBarDoted/progressDot/bg', modes)
   )
 
   const contentGap = toNumber(getVariableByName('circularProgressBarDoted/gap', modes), 12)
@@ -160,21 +160,21 @@ function CircularProgressBarDoted({
   const scoreTrendGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/gap', modes), 2)
   const scoreTrendHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/height', modes), 24)
 
-  const typographyFontFamily = getVariableByName('Typography/Font Family', modes) as string || 'JioType Var'
-  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes) as string || '#080d1a'
+  const typographyFontFamily = getVariableByName('Typography/Font Family', modes)
+  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes)
   const labelFontSize = toNumber(getVariableByName('Typography/Size/Body/XS', modes), 12)
   const labelFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body Low (Regular)', modes), '400')
 
-  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes) as string || '#080d1a'
+  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes)
   const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56)
-  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes) as string || 'JioType Var'
+  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes)
   const scoreLineHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56)
   const scoreFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900')
 
-  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes) as string || '#080d1a'
+  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes)
   const tierFontSize = toNumber(getVariableByName('Typography/Size/Body/M', modes), 16)
   const tierFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body High', modes), '700')
-  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes) as string || '#303338'
+  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes)
   const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24)
 
   const dots = useMemo(

package/src/components/CircularRating/CircularRating.tsx

@@ -105,9 +105,9 @@ function resolveCircularRatingTokens(modes: Modes): CircularRatingTokens {
 
   const footerGap = toNumber(getVariableByName('circularRating/footer/gap', modes), 4)
   const footerHeight = toNumber(getVariableByName('circularRating/footer/height', modes), 16)
-  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes) || '#0d0d0f'
+  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes)
   const footerTextFontSize = toNumber(getVariableByName('circularRating/footer/text/fontSize', modes), 12)
-  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes) || 'JioType Var'
+  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes)
   const footerTextLineHeight = toNumber(getVariableByName('circularRating/footer/text/lineHeight', modes), 16)
   const footerTextFontWeight = toFontWeight(
     getVariableByName('circularRating/footer/text/fontWeight', modes),
@@ -141,7 +141,7 @@ function resolveCircularRatingTokens(modes: Modes): CircularRatingTokens {
       lineHeight: footerTextLineHeight,
       textAlign: 'center',
     },
-    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f') as string,
+    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes)) as string,
     footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16),
   }
 }

package/src/components/CompareTable/CompareTable.tsx

@@ -215,24 +215,24 @@ function CompareTable({
     const addIconColor = ADD_BUTTON_ICON_COLOR
 
     // --- table header tokens --------------------------------------------------
-    const headerBg = (getVariableByName('comparetableHeader/background/color', modes) as string) ?? '#f5f5f5'
-    const headerLabelColor = (getVariableByName('comparetableHeader/label/color', modes) as string) ?? '#000000'
-    const headerFontSize = (getVariableByName('comparetableHeader/label/fontsize', modes) as number) ?? 14
-    const headerFontFamily = (getVariableByName('comparetableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
-    const headerFontWeight = (getVariableByName('comparetableHeader/label/fontweight', modes) as number | string) ?? 600
-    const headerPaddingH = (getVariableByName('comparetableHeader/padding/horizontal', modes) as number) ?? 12
-    const headerPaddingV = (getVariableByName('comparetableHeader/padding/vertical', modes) as number) ?? 12
+    const headerBg = (getVariableByName('tableHeader/background/color', modes) as string) ?? '#f5f5f5'
+    const headerLabelColor = (getVariableByName('tableHeader/label/color', modes) as string) ?? '#000000'
+    const headerFontSize = (getVariableByName('tableHeader/label/fontsize', modes) as number) ?? 14
+    const headerFontFamily = (getVariableByName('tableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const headerFontWeight = (getVariableByName('tableHeader/label/fontweight', modes) as number | string) ?? 600
+    const headerPaddingH = (getVariableByName('tableHeader/padding/horizontal', modes) as number) ?? 12
+    const headerPaddingV = (getVariableByName('tableHeader/padding/vertical', modes) as number) ?? 12
 
     // --- table cell tokens ----------------------------------------------------
-    const cellBorderColor = (getVariableByName('compareTableCell/border/color', modes) as string) ?? '#eeeeee'
-    const cellBorderSize = (getVariableByName('compareTableCell/border/size', modes) as number) ?? 1
-    const cellBg = (getVariableByName('compareTableCell/background/color', modes) as string) ?? '#ffffff'
-    const cellLabelColor = (getVariableByName('compareTableCell/label/color', modes) as string) ?? '#000000'
-    const cellFontSize = (getVariableByName('compareTableCell/label/fontsize', modes) as number) ?? 14
-    const cellFontFamily = (getVariableByName('compareTableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
-    const cellFontWeight = (getVariableByName('compareTableCell/label/fontweight', modes) as number | string) ?? 400
-    const cellPaddingH = (getVariableByName('compareTableCell/padding/horizontal', modes) as number) ?? 12
-    const cellPaddingV = (getVariableByName('compareTableCell/padding/vertical', modes) as number) ?? 12
+    const cellBorderColor = (getVariableByName('tableCell/border/color', modes) as string) ?? '#eeeeee'
+    const cellBorderSize = (getVariableByName('tableCell/border/size', modes) as number) ?? 1
+    const cellBg = (getVariableByName('tableCell/background/color', modes) as string) ?? '#ffffff'
+    const cellLabelColor = (getVariableByName('tableCell/label/color', modes) as string) ?? '#000000'
+    const cellFontSize = (getVariableByName('tableCell/label/fontsize', modes) as number) ?? 14
+    const cellFontFamily = (getVariableByName('tableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const cellFontWeight = (getVariableByName('tableCell/label/fontweight', modes) as number | string) ?? 400
+    const cellPaddingH = (getVariableByName('tableCell/padding/horizontal', modes) as number) ?? 12
+    const cellPaddingV = (getVariableByName('tableCell/padding/vertical', modes) as number) ?? 12
 
     const columnCount = columns.length
     const showAddCard = onAddColumn != null && columnCount < maxColumns