jfs-components 0.1.12 → 0.1.17

package/lib/commonjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "MediaSource", {
     return _MediaSource.default;
   }
 });
+Object.defineProperty(exports, "boxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.boxShadow;
+  }
+});
 Object.defineProperty(exports, "cloneChildrenWithModes", {
   enumerable: true,
   get: function () {
@@ -27,7 +33,26 @@ Object.defineProperty(exports, "formatIndianNumber", {
     return _numberUtils.formatIndianNumber;
   }
 });
+Object.defineProperty(exports, "parseBoxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.parseBoxShadow;
+  }
+});
+Object.defineProperty(exports, "parseSingleShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.parseSingleShadow;
+  }
+});
+Object.defineProperty(exports, "supportsNativeBoxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.supportsNativeBoxShadow;
+  }
+});
 var _reactUtils = require("./react-utils");
 var _MediaSource = _interopRequireDefault(require("./MediaSource"));
 var _numberUtils = require("./number-utils");
+var _shadow = require("./shadow");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/utils/react-utils.js

@@ -8,8 +8,10 @@ exports.cloneChildrenWithModes = cloneChildrenWithModes;
 exports.flattenChildren = flattenChildren;
 exports.injectChildStyle = injectChildStyle;
 exports.mergeRefs = mergeRefs;
+exports.resolveTextLayout = resolveTextLayout;
 exports.resolveTruncation = resolveTruncation;
 var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * A shared, frozen empty modes object.
@@ -156,6 +158,66 @@ function resolveTruncation(disableTruncation, numberOfLines, ellipsizeMode) {
     ellipsizeMode
   };
 }
+/**
+ * Resolves the `<Text>` props + style for the two truncation escape hatches.
+ * This supersedes {@link resolveTruncation} for components that want the
+ * "brutal" overflow behaviour rather than just dropping the line clamp.
+ *
+ * - `disableTruncation`: never truncate. Drops `numberOfLines`/`ellipsizeMode`
+ *   AND sets `flexShrink: 0`, so a tight flex parent can no longer squeeze the
+ *   text into an ellipsis — instead the text keeps its intrinsic size and
+ *   overflows, even if that means blowing past (and visually breaking) the
+ *   parent layout. The text still wraps onto multiple lines.
+ * - `singleLine`: force everything onto one line with no wrapping. Implies
+ *   `disableTruncation` (the ellipsis is never shown). On web this adds
+ *   `whiteSpace: 'nowrap'` so the single line overflows horizontally instead of
+ *   wrapping. The text is never shrunk.
+ *
+ * Note (native): React Native's `<Text>` has no `white-space: nowrap`
+ * equivalent, so on iOS/Android `singleLine` cannot force a hard non-wrapping
+ * overflow — it behaves like `disableTruncation` (no ellipsis, no shrink). The
+ * hard single-line overflow is honoured on web (Storybook / react-native-web).
+ *
+ * When neither flag is set, the supplied `numberOfLines`/`ellipsizeMode` pass
+ * through unchanged and no extra style is returned.
+ */
+function resolveTextLayout({
+  disableTruncation,
+  singleLine,
+  numberOfLines,
+  ellipsizeMode
+}) {
+  if (singleLine) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        flexGrow: 0,
+        ...(_reactNative.Platform.OS === 'web' ? {
+          whiteSpace: 'nowrap',
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  if (disableTruncation) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        ...(_reactNative.Platform.OS === 'web' ? {
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  return {
+    numberOfLines,
+    ellipsizeMode
+  };
+}
 
 /**
  * Flattens React children, extracting them from Fragments.

package/lib/commonjs/utils/shadow.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.boxShadow = boxShadow;
+exports.parseBoxShadow = parseBoxShadow;
+exports.parseSingleShadow = parseSingleShadow;
+exports.supportsNativeBoxShadow = supportsNativeBoxShadow;
+var _reactNative = require("react-native");
+/**
+ * Cross-platform drop-shadow helper with a backward-compatibility layer.
+ *
+ * Why this exists
+ * ----------------
+ * The spec-compliant `boxShadow` style prop only landed in React Native 0.76
+ * (and only on the New Architecture / Fabric). Older apps that consume this
+ * library are still on pre-0.76 React Native where `boxShadow` is silently
+ * ignored on native, so their shadows simply disappear.
+ *
+ * Rather than hand-rolling a `Platform.select` block in every component, route
+ * ALL drop shadows through this single helper. When `boxShadow` is natively
+ * supported it is used verbatim (web + RN 0.76+ Fabric). When it is NOT
+ * supported, the CSS-style shadow string is parsed and translated into the
+ * legacy native shadow API:
+ *   - iOS:     `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`
+ *   - Android: `elevation`
+ *
+ * @example
+ * ```tsx
+ * const style = boxShadow('0px 2px 4px 0px rgba(0,0,0,0.18)')
+ * <View style={[base, style]} />
+ * ```
+ */
+
+// `boxShadow` is intentionally absent from the @types/react-native surface in
+// this repo (pinned to 0.73), so we widen ViewStyle locally for the cases
+// where we DO emit the native/web boxShadow string.
+
+/**
+ * Whether the spec-compliant `boxShadow` style prop is honored at runtime.
+ * - Web (react-native-web) always supports it.
+ * - Native supports it from RN 0.76+ AND only on the New Architecture (Fabric).
+ */
+function supportsNativeBoxShadow() {
+  if (_reactNative.Platform.OS === 'web') {
+    return true;
+  }
+  const version = _reactNative.Platform.constants?.reactNativeVersion;
+  const isVersionSupported = version ? version.major > 0 || version.major === 0 && version.minor >= 76 : false;
+
+  // Even on 0.76+, boxShadow is a New Architecture feature. Fabric exposes a
+  // global UI manager; its presence is the most reliable runtime signal.
+  const isFabric = typeof globalThis !== 'undefined' && globalThis.nativeFabricUIManager != null;
+  return isVersionSupported && isFabric;
+}
+
+/**
+ * Splits a (potentially multi-) box-shadow string on top-level commas, i.e.
+ * commas that are NOT inside a color function such as `rgba(12, 13, 16, 0.12)`.
+ */
+function splitShadows(value) {
+  const out = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of value) {
+    if (ch === '(') depth++;else if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) {
+      if (current.trim()) out.push(current.trim());
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) out.push(current.trim());
+  return out;
+}
+
+/**
+ * Parses a single CSS box-shadow layer into its primitive parts.
+ * Supports: `[inset] offsetX offsetY [blur] [spread] color` in any sensible
+ * ordering of the keyword/color, with `rgb()/rgba()/hsl()/hsla()`, hex, or
+ * named colors.
+ */
+function parseSingleShadow(input) {
+  let s = input.trim();
+  let inset = false;
+  if (/(^|\s)inset(\s|$)/i.test(s)) {
+    inset = true;
+    s = s.replace(/(^|\s)inset(\s|$)/i, ' ').trim();
+  }
+  let color = 'rgba(0,0,0,1)';
+  const fnColor = s.match(/(?:rgba?|hsla?)\([^)]*\)/i);
+  if (fnColor) {
+    color = fnColor[0];
+    s = s.replace(fnColor[0], ' ').trim();
+  } else {
+    const hex = s.match(/#[0-9a-fA-F]{3,8}\b/);
+    if (hex) {
+      color = hex[0];
+      s = s.replace(hex[0], ' ').trim();
+    } else {
+      // Fall back to a trailing named color token (e.g. "red", "black").
+      const tokens = s.split(/\s+/).filter(Boolean);
+      const last = tokens[tokens.length - 1];
+      if (last && Number.isNaN(parseFloat(last))) {
+        color = last;
+        tokens.pop();
+        s = tokens.join(' ');
+      }
+    }
+  }
+  const nums = s.split(/\s+/).filter(Boolean).map(t => parseFloat(t) || 0);
+  const [offsetX = 0, offsetY = 0, blur = 0, spread = 0] = nums;
+  return {
+    offsetX,
+    offsetY,
+    blur,
+    spread,
+    color,
+    inset
+  };
+}
+
+/**
+ * Parses a full box-shadow string (one or more comma-separated layers).
+ */
+function parseBoxShadow(value) {
+  return splitShadows(value).map(parseSingleShadow);
+}
+
+/**
+ * Picks the visually dominant shadow layer (largest blur, then largest spread).
+ * iOS' legacy shadow API can only render a single shadow per view.
+ */
+function pickPrimary(shadows) {
+  if (shadows.length === 0) return undefined;
+  return shadows.reduce((best, s) => {
+    if (s.blur > best.blur) return s;
+    if (s.blur === best.blur && s.spread > best.spread) return s;
+    return best;
+  });
+}
+
+/**
+ * Translates the parsed shadow into the legacy native shadow style used by
+ * pre-0.76 React Native.
+ */
+function legacyShadowStyle(value, options) {
+  const shadows = parseBoxShadow(value);
+  const primary = pickPrimary(shadows);
+  if (!primary) {
+    return {};
+  }
+  if (_reactNative.Platform.OS === 'android') {
+    const elevation = options?.elevation ?? Math.max(0, Math.round(primary.blur / 2));
+    if (elevation <= 0) {
+      return {};
+    }
+    return {
+      elevation
+    };
+  }
+
+  // iOS: shadowOpacity defaults to 0 (invisible), so it MUST be set. We keep
+  // the full color (its own alpha is respected) and use opacity 1 as the
+  // multiplier so rgba() alpha is honored end-to-end.
+  return {
+    shadowColor: primary.color,
+    shadowOffset: {
+      width: primary.offsetX,
+      height: primary.offsetY
+    },
+    shadowOpacity: 1,
+    shadowRadius: primary.blur
+  };
+}
+
+/**
+ * Returns a style object that renders the given CSS-style box-shadow on every
+ * platform. Uses the native `boxShadow` prop when supported, otherwise falls
+ * back to the legacy `shadow*` (iOS) / `elevation` (Android) API.
+ *
+ * @param value   A CSS box-shadow string, e.g. `'0px 2px 4px 0px rgba(0,0,0,0.2)'`.
+ *                Multiple comma-separated layers are supported; on the legacy
+ *                fallback iOS uses the most prominent layer and Android uses a
+ *                single elevation.
+ * @param options Optional overrides (e.g. explicit Android `elevation`).
+ */
+function boxShadow(value, options) {
+  if (!value) {
+    return {};
+  }
+  if (supportsNativeBoxShadow()) {
+    return {
+      boxShadow: value
+    };
+  }
+  return legacyShadowStyle(value, options);
+}

package/lib/module/components/ActionFooter/ActionFooter.js

@@ -4,10 +4,9 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, Keyboard, View, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
-const IS_WEB = Platform.OS === 'web';
-
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -36,27 +35,11 @@ const STRETCH_STYLE = {
   minWidth: 0
 };
 
-// Platform-specific drop shadow. Web boxShadow can't go through
-// Platform.select (RN's typed surface doesn't include it) so we keep it as a
-// separate constant and append it below.
-const NATIVE_SHADOW = Platform.select({
-  ios: {
-    shadowColor: '#0c0d10',
-    shadowOffset: {
-      width: 0,
-      height: -12
-    },
-    shadowOpacity: 0.16,
-    shadowRadius: 24
-  },
-  android: {
-    elevation: 16
-  },
-  default: {}
+// Upward drop shadow routed through the unified helper: native `boxShadow` on
+// web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+const SHADOW = boxShadow('0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)', {
+  elevation: 16
 });
-const WEB_SHADOW = IS_WEB ? {
-  boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
-} : null;
 
 // The runtime token a slot child must equal (by reference) to be treated as
 // an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
@@ -165,7 +148,7 @@ function ActionFooter({
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
-      ...NATIVE_SHADOW
+      ...SHADOW
     };
     const slot = {
       flexDirection: 'row',
@@ -202,7 +185,7 @@ function ActionFooter({
     });
   }, [children, modes]);
   return /*#__PURE__*/_jsx(Animated.View, {
-    style: [containerStyle, WEB_SHADOW, style,
+    style: [containerStyle, style,
     // Counter-translate by the keyboard height on Android so `adjustResize`
     // can't lift the footer above the keyboard (no-op on iOS/web where the
     // value stays at 0).

package/lib/module/components/ActionTile/ActionTile.js

@@ -29,18 +29,18 @@ export default function ActionTile({
   };
 
   // Resolve tokens
-  const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff';
-  const gap = Number(getVariableByName('actionTile/gap', modes)) || 8;
-  const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12;
-  const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16;
-  const radius = Number(getVariableByName('actionTile/radius', modes)) || 16;
+  const backgroundColor = getVariableByName('actionTile/background', modes);
+  const gap = Number(getVariableByName('actionTile/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes));
+  const radius = Number(getVariableByName('actionTile/radius', modes));
 
   // Text tokens
-  const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f';
-  const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14;
-  const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var';
-  const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500';
-  const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17;
+  const textColor = getVariableByName('actionTile/foreground', modes);
+  const fontSize = Number(getVariableByName('actionTile/fontSize', modes));
+  const fontFamily = getVariableByName('actionTile/fontFamily', modes);
+  const fontWeightStr = getVariableByName('actionTile/fontWeight', modes);
+  const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,

package/lib/module/components/AmountInput/AmountInput.js

@@ -28,9 +28,9 @@ const AmountInput = /*#__PURE__*/forwardRef(function AmountInput({
   };
 
   // Resolve tokens
-  const gap = Number(getVariableByName('amountInput/gap', modes)) || 16;
-  const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0;
-  const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0;
+  const gap = Number(getVariableByName('amountInput/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/AreaLineChart/AreaLineChart.js

@@ -720,7 +720,7 @@ function ChartTooltip({
   const bg = getVariableByName('tooltip/background', modes) ?? '#0f0d0a';
   const paddingH = toNumber(getVariableByName('tooltip/padding/horizontal', modes), 12);
   const paddingV = toNumber(getVariableByName('tooltip/padding/vertical', modes), 8);
-  const radius = toNumber(getVariableByName('radius', modes), 8);
+  const radius = 8;
   const labelColor = getVariableByName('tooltip/label/color', modes) ?? '#ffffff';
   if (items.length === 0) return null;
 
@@ -798,7 +798,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes) {
   return useMemo(() => {
-    const color = getVariableByName('axisItem/color', modes) ?? '#000000';
+    const color = getVariableByName('axisItem/fg', modes) ?? '#000000';
     const fontFamily = getVariableByName('axisItem/fontFamily', modes) ?? 'JioType Var';
     const fontSize = toNumber(getVariableByName('axisItem/fontSize', modes), 12);
     const lineHeight = toNumber(getVariableByName('axisItem/lineHeight', modes), 16);

package/lib/module/components/Attached/Attached.js

@@ -124,7 +124,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = useMemo(() => {
     const borderColor = getVariableByName('attached/slot/border', modes);
-    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes) || '0');
+    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes));
     if (!borderColor || !(borderWidth > 0)) return null;
 
     // Match the inner clip radius so the ring stays concentric. The outer edge

package/lib/module/components/Avatar/Avatar.js

@@ -51,17 +51,17 @@ const monogramContainerStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveAvatarTokens(modes, isMonogram) {
-  const size = getVariableByName('avatar/size', modes) || 29;
-  const radiusRaw = getVariableByName('avatar/radius', modes) || 9999;
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff';
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5';
-  const labelFontSize = getVariableByName('avatar/label/fontSize', modes) || 12;
-  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes) || 14;
-  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500;
+  const size = getVariableByName('avatar/size', modes);
+  const radiusRaw = getVariableByName('avatar/radius', modes);
+  const backgroundColor = getVariableByName('avatar/background', modes);
+  const borderColor = getVariableByName('avatar/border/color', modes);
+  const borderSize = getVariableByName('avatar/border/size', modes);
+  const labelColor = getVariableByName('avatar/label/color', modes);
+  const labelFontSize = getVariableByName('avatar/label/fontSize', modes);
+  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes);
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
-  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes) || 'Inter';
+  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes);
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;

package/lib/module/components/AvatarGroup/AvatarGroup.js

@@ -13,15 +13,15 @@ function AvatarGroup({
   style,
   ...rest
 }) {
-  const gap = getVariableByName('avatarGroup/gap', modes) || 0;
-  const avatarSize = getVariableByName('avatar/size', modes) || 29;
-  const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
-  const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
-  const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
-  const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+  const gap = getVariableByName('avatarGroup/gap', modes);
+  const avatarSize = getVariableByName('avatar/size', modes);
+  const avatarRadius = getVariableByName('avatar/radius', modes);
+  const borderSize = getVariableByName('avatar/border/size', modes);
+  const borderColor = getVariableByName('avatar/border/color', modes);
+  const paddingLeft = getVariableByName('avatarGroup/padding/left', modes);
+  const paddingRight = getVariableByName('avatarGroup/padding/right', modes);
+  const paddingTop = getVariableByName('avatarGroup/padding/top', modes);
+  const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes);
   const validChildren = flattenChildren(children);
   const totalChildren = validChildren.length;
 

package/lib/module/components/Badge/Badge.js

@@ -29,20 +29,20 @@ function Badge({
   // Resolve token values (fall back to sensible defaults). The glass type
   // swaps the solid fill for a translucent overlay + white label, matching the
   // Figma `badge/glass/*` tokens.
-  const backgroundColor = getVariableByName('badge/color/background', modes) || '#d8effe';
-  const glassBackground = getVariableByName('badge/glass/color/background', modes) || '#ffffff26';
-  const glassLabelColor = getVariableByName('badge/glass/color/label', modes) || '#ffffff';
-  const labelColor = isGlass ? glassLabelColor : getVariableByName('badge/color/label', modes) || '#000000';
-  const fontSize = Number(getVariableByName('badge/label/fontSize', modes)) || 12;
-  const fontFamily = getVariableByName('badge/fontFamily', modes) || undefined;
-  const fontWeight = getVariableByName('badge/label/fontWeight', modes) || '600';
-  const paddingHorizontal = Number(getVariableByName('badge/padding/horizontal', modes)) || 6;
-  const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes)) || 4;
-  const borderRadius = Number(getVariableByName('badge/radius', modes)) || 4;
-  const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  const backgroundColor = getVariableByName('badge/color/background', modes);
+  const glassBackground = getVariableByName('badge/glass/color/background', modes);
+  const glassLabelColor = getVariableByName('badge/glass/color/label', modes);
+  const labelColor = isGlass ? glassLabelColor : getVariableByName('badge/color/label', modes);
+  const fontSize = Number(getVariableByName('badge/label/fontSize', modes));
+  const fontFamily = getVariableByName('badge/fontFamily', modes);
+  const fontWeight = getVariableByName('badge/label/fontWeight', modes);
+  const paddingHorizontal = Number(getVariableByName('badge/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes));
+  const borderRadius = Number(getVariableByName('badge/radius', modes));
+  const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes));
   // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
   // same 1:1 mapping the merchandising card footer uses.
-  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes)) || 29)));
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes)))));
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.