@ledgerhq/lumen-ui-rnative 0.0.51 → 0.0.53

package/src/lib/Components/Utility/Gradient/RadialGradient/types.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { StyledViewProps } from '../../../../../styles';
+import { GradientStop } from '../gradient.types';
+export type RadialGradientCenter = {
+  /**
+   * Horizontal position (0 = left, 1 = right)
+   */
+  x: number;
+  /**
+   * Vertical position (0 = top, 1 = bottom)
+   */
+  y: number;
+};
+
+export type RadialGradientProps = {
+  /**
+   * Gradient color stops
+   * Takes an object of color, offset and opacity.
+   * Offset is a number between 0 and 1.
+   * Opacity is a number between 0 and 1.
+   */
+  stops: GradientStop[];
+  /**
+   * Optional children to render on top of the gradient
+   */
+  children?: ReactNode;
+  /**
+   * Center position of the gradient.
+   * @default { x: 0.5, y: 0.5 }
+   */
+  center?: RadialGradientCenter;
+} & StyledViewProps;

package/src/lib/Components/Utility/Gradient/gradient.types.ts

@@ -0,0 +1,22 @@
+import type { LumenStyleSheetTheme } from '../../../../styles';
+
+/**
+ * Background color token from the theme
+ */
+export type BackgroundColorToken = keyof LumenStyleSheetTheme['colors']['bg'];
+
+export type GradientStop = {
+  /**
+   * Color value - can be a design token key (e.g., 'accent', 'error')
+   * or a raw color string (e.g., '#FF6B6B', 'rgba(...)')
+   */
+  color: BackgroundColorToken | (string & {});
+  /**
+   * Position of the stop (0-1). If omitted, stops are auto-spread evenly.
+   */
+  offset?: number;
+  /**
+   * Opacity of the color (0-1).
+   */
+  opacity?: number;
+};

package/src/lib/Components/Utility/Gradient/utils/resolveGradientColor.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import {
+  resolveGradientColor,
+  processGradientStops,
+} from './resolveGradientColor';
+
+const bgColors = ledgerLiveThemes.dark.colors.bg;
+
+describe('resolveGradientColor', () => {
+  describe('resolveGradientColor', () => {
+    it('should resolve background tokens to actual color values', () => {
+      const accentColor = resolveGradientColor('accent', bgColors);
+      expect(accentColor).toBe(bgColors.accent);
+      expect(accentColor).toMatch(/^#|^rgb/);
+    });
+
+    it('should pass through raw hex colors unchanged', () => {
+      expect(resolveGradientColor('#FF6B6B', bgColors)).toBe('#FF6B6B');
+      expect(resolveGradientColor('#000', bgColors)).toBe('#000');
+    });
+
+    it('should pass through rgb/rgba colors unchanged', () => {
+      expect(resolveGradientColor('rgb(255, 0, 0)', bgColors)).toBe(
+        'rgb(255, 0, 0)',
+      );
+      expect(resolveGradientColor('rgba(255, 0, 0, 0.5)', bgColors)).toBe(
+        'rgba(255, 0, 0, 0.5)',
+      );
+    });
+
+    it('should pass through named CSS colors unchanged', () => {
+      expect(resolveGradientColor('red', bgColors)).toBe('red');
+      expect(resolveGradientColor('blue', bgColors)).toBe('blue');
+    });
+  });
+
+  describe('processGradientStops', () => {
+    it('should resolve color tokens in stops', () => {
+      const stops = [{ color: 'accent' }, { color: 'error' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].color).toBe(bgColors.accent);
+      expect(processed[1].color).toBe(bgColors.error);
+    });
+
+    it('should preserve raw colors in stops', () => {
+      const stops = [{ color: '#FF6B6B' }, { color: '#4ECDC4' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].color).toBe('#FF6B6B');
+      expect(processed[1].color).toBe('#4ECDC4');
+    });
+
+    it('should auto-spread offsets for 2 stops', () => {
+      const stops = [{ color: '#FF6B6B' }, { color: '#4ECDC4' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0);
+      expect(processed[1].offset).toBe(1);
+    });
+
+    it('should auto-spread offsets for 3 stops', () => {
+      const stops = [
+        { color: '#FF6B6B' },
+        { color: '#FFD93D' },
+        { color: '#4ECDC4' },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0);
+      expect(processed[1].offset).toBe(0.5);
+      expect(processed[2].offset).toBe(1);
+    });
+
+    it('should auto-spread offsets for 4 stops', () => {
+      const stops = [
+        { color: '#FF6B6B' },
+        { color: '#FFD93D' },
+        { color: '#6BCB77' },
+        { color: '#4ECDC4' },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBeCloseTo(0);
+      expect(processed[1].offset).toBeCloseTo(0.333, 2);
+      expect(processed[2].offset).toBeCloseTo(0.666, 2);
+      expect(processed[3].offset).toBeCloseTo(1);
+    });
+
+    it('should preserve explicit offsets', () => {
+      const stops = [
+        { color: '#FF6B6B', offset: 0.1 },
+        { color: '#FFD93D', offset: 0.3 },
+        { color: '#4ECDC4', offset: 0.9 },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0.1);
+      expect(processed[1].offset).toBe(0.3);
+      expect(processed[2].offset).toBe(0.9);
+    });
+
+    it('should default opacity to 1', () => {
+      const stops = [{ color: '#FF6B6B' }, { color: '#4ECDC4' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].opacity).toBe(1);
+      expect(processed[1].opacity).toBe(1);
+    });
+
+    it('should preserve explicit opacity', () => {
+      const stops = [
+        { color: '#FF6B6B', opacity: 0.5 },
+        { color: '#4ECDC4', opacity: 0.8 },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].opacity).toBe(0.5);
+      expect(processed[1].opacity).toBe(0.8);
+    });
+
+    it('should handle single stop', () => {
+      const stops = [{ color: '#FF6B6B' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0);
+      expect(processed[0].opacity).toBe(1);
+    });
+
+    it('should handle mixed token and raw colors', () => {
+      const stops = [
+        { color: 'accent', offset: 0 },
+        { color: '#FF6B6B', offset: 0.5 },
+        { color: 'error', offset: 1 },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].color).toBe(bgColors.accent);
+      expect(processed[1].color).toBe('#FF6B6B');
+      expect(processed[2].color).toBe(bgColors.error);
+    });
+  });
+});

package/src/lib/Components/Utility/Gradient/utils/resolveGradientColor.ts

@@ -0,0 +1,59 @@
+import type { LumenStyleSheetTheme } from '../../../../../styles';
+import type { BackgroundColorToken, GradientStop } from '../gradient.types';
+
+type BackgroundColors = LumenStyleSheetTheme['colors']['bg'];
+const DEFAULT_OPACITY = 1;
+const DEFAULT_OFFSET = 0;
+
+/**
+ * Resolves a gradient stop color to a concrete color value.
+ * If the color is a design token, it's resolved from the theme.
+ * If it's a raw color string, it's returned as-is.
+ */
+export const resolveGradientColor = (
+  color: string,
+  bgColors: BackgroundColors,
+): string => {
+  const isBackgroundToken = color in bgColors;
+  if (isBackgroundToken) {
+    return bgColors[color as BackgroundColorToken];
+  }
+  return color;
+};
+
+/**
+ * Processes gradient stops by:
+ * 1. Resolving color tokens to actual values
+ * 2. Auto-spreading offsets if not provided
+ */
+export const processGradientStops = (
+  stops: GradientStop[],
+  bgColors: BackgroundColors,
+): Array<{
+  color: string;
+  offset: number;
+  opacity: number;
+}> => {
+  const stopCount = stops.length;
+
+  return stops.map((stop, index) => {
+    const resolvedColor = resolveGradientColor(stop.color, bgColors);
+
+    // Auto-spread offsets if not provided
+    // For n stops: 0, 1/(n-1), 2/(n-1), ..., 1
+    const offset =
+      stop.offset !== undefined
+        ? stop.offset
+        : stopCount === 1
+          ? DEFAULT_OFFSET
+          : index / (stopCount - 1);
+
+    const opacity = stop.opacity !== undefined ? stop.opacity : DEFAULT_OPACITY;
+
+    return {
+      color: resolvedColor,
+      offset,
+      opacity,
+    };
+  });
+};

package/src/lib/Components/Utility/index.ts

@@ -1,3 +1,5 @@
 export * from './Pressable';
 export * from './Box';
 export * from './Text';
+export * from './Gradient/LinearGradient';
+export * from './Gradient/RadialGradient';