@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.mdx

@@ -0,0 +1,109 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as RadialGradientStories from './RadialGradient.stories';
+import { CustomTabs, Tab } from '../../../../../../.storybook/components';
+
+<Meta title='Utility/RadialGradient' of={RadialGradientStories} />
+
+# RadialGradient
+
+<CustomTabs>
+  <Tab label="Overview ">
+
+## Introduction
+
+RadialGradient renders a radial gradient background using `react-native-svg`. 
+It extends Box, supporting all `lx` style props for layout and sizing.
+
+## Anatomy
+
+<Canvas of={RadialGradientStories.Base} />
+<Controls of={RadialGradientStories.Base} />
+
+## Properties
+
+### Center Position
+
+Control where the gradient originates using the `center` prop:
+
+<Canvas of={RadialGradientStories.CenterPositionShowcase} />
+
+### With Children
+
+Content renders on top of the gradient:
+
+<Canvas of={RadialGradientStories.WithChildren} />
+
+### Multiple Stops
+
+The `offset` prop controls where each color appears from center to edge (0 = center, 1 = edge).  
+When omitted, stops are distributed evenly.  
+For example, 3 stops without offsets will be placed at 0, 0.5, and 1.
+
+<Canvas of={RadialGradientStories.WithMultipleStops} />
+
+</Tab>
+
+  <Tab label="Implementation ">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+By default, the gradient radiates from center outward. Use design tokens for colors to ensure theme consistency.
+
+```tsx
+import { RadialGradient } from '@ledgerhq/lumen-ui-rnative';
+
+<RadialGradient
+  stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+  lx={{ height: 's192', width: 's192', borderRadius: 'lg' }}
+/>
+```
+
+### Custom Center
+
+The `center` prop uses normalized coordinates (0-1). `{ x: 0, y: 0 }` is top-left, `{ x: 1, y: 1 }` is bottom-right. 
+Useful for spotlight or vignette effects.
+
+```tsx
+<RadialGradient
+  center={{ x: 0, y: 0 }}
+  stops={[{ color: 'accent' }, { color: 'active' }]}
+  lx={{ height: 's80', width: 's80' }}
+/>
+```
+
+### With Children
+
+The gradient acts as a background. Children are rendered on top and define the component's height when no explicit size is set.
+
+```tsx
+<RadialGradient
+  center={{ x: 0.5, y: 0.3 }}
+  stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+  lx={{ padding: 's24', borderRadius: 'lg' }}
+>
+  <Text lx={{ color: 'base' }}>Content on gradient</Text>
+</RadialGradient>
+```
+
+### Stops API
+
+Each stop defines a color at a distance from center. Use `opacity: 0` for fade-out effects. 
+Colors support both design tokens (`'accent'`) and raw values (`'#FF6B6B'`).
+
+**Default behavior when `offset` is omitted:** stops are evenly distributed. 
+With 2 stops → `[0, 1]`. With 3 stops → `[0, 0.5, 1]`. With 4 stops → `[0, 0.33, 0.66, 1]`.
+
+```tsx
+type GradientStop = {
+  color: BackgroundColorToken | string;  // Token or raw color
+  offset?: number;   // 0-1, auto-spread if omitted
+  opacity?: number;  // 0-1, defaults to 1
+}
+```
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js

@@ -0,0 +1,233 @@
+"use strict";
+
+import { Box } from "../../Box/index.js";
+import { Text } from "../../Text/index.js";
+import { RadialGradient } from "./RadialGradient.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: RadialGradient,
+  title: 'Utility/RadialGradient',
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'light'
+    },
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    stops: [{
+      color: 'accent'
+    }, {
+      color: 'active',
+      opacity: 0
+    }],
+    lx: {
+      height: 's192',
+      width: 's192',
+      borderRadius: 'lg'
+    }
+  }
+};
+export const CenterPositionShowcase = {
+  render: () => {
+    const positions = [{
+      title: 'Aspect ratio 1:1',
+      isSquare: true,
+      items: [{
+        center: {
+          x: 0.5,
+          y: 0.5
+        },
+        label: '{x: 0.5, y: 0.5} (default)'
+      }, {
+        center: {
+          x: 0.2,
+          y: 0.2
+        },
+        label: '{x: 0.2, y: 0.2}'
+      }, {
+        center: {
+          x: 0.8,
+          y: 0.8
+        },
+        label: '{x: 0.8, y: 0.8}'
+      }, {
+        center: {
+          x: 0.2,
+          y: 0.8
+        },
+        label: '{x: 0.2, y: 0.8}'
+      }, {
+        center: {
+          x: 0.8,
+          y: 0.2
+        },
+        label: '{x: 0.8, y: 0.2}'
+      }]
+    }, {
+      title: 'Aspect ratio 1:2',
+      isSquare: false,
+      items: [{
+        center: {
+          x: 0.5,
+          y: 0.5
+        },
+        label: '{x: 0.5, y: 0.5} (default)'
+      }, {
+        center: {
+          x: 0.2,
+          y: 0.2
+        },
+        label: '{x: 0.2, y: 0.2}'
+      }, {
+        center: {
+          x: 0.8,
+          y: 0.8
+        },
+        label: '{x: 0.8, y: 0.8}'
+      }, {
+        center: {
+          x: 0.2,
+          y: 0.8
+        },
+        label: '{x: 0.2, y: 0.8}'
+      }, {
+        center: {
+          x: 0.8,
+          y: 0.2
+        },
+        label: '{x: 0.8, y: 0.2}'
+      }]
+    }];
+    return /*#__PURE__*/_jsx(Box, {
+      lx: {
+        flexDirection: 'column',
+        gap: 's40'
+      },
+      children: positions.map(({
+        title,
+        isSquare,
+        items
+      }) => /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          typography: "heading5SemiBold",
+          lx: {
+            color: 'base',
+            marginBottom: 's16'
+          },
+          children: title
+        }), /*#__PURE__*/_jsx(Box, {
+          lx: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 's24'
+          },
+          children: items.map(({
+            center,
+            label
+          }) => /*#__PURE__*/_jsxs(Box, {
+            lx: {
+              gap: 's8',
+              alignItems: 'center'
+            },
+            children: [/*#__PURE__*/_jsx(RadialGradient, {
+              center: center,
+              stops: [{
+                color: 'accent'
+              }, {
+                color: 'active',
+                opacity: 0
+              }],
+              lx: {
+                height: 's72',
+                width: isSquare ? 's72' : 's144',
+                borderRadius: 'md',
+                borderColor: 'active',
+                borderWidth: 's1'
+              }
+            }), /*#__PURE__*/_jsx(Text, {
+              typography: "body4",
+              lx: {
+                color: 'base'
+              },
+              children: label
+            })]
+          }, label))
+        })]
+      }, title))
+    });
+  }
+};
+export const WithChildren = {
+  args: {
+    stops: [{
+      color: 'accent'
+    }, {
+      color: 'active',
+      opacity: 0
+    }],
+    lx: {
+      padding: 's24',
+      borderRadius: 'lg',
+      width: 's288',
+      borderColor: 'active',
+      borderWidth: 's1'
+    }
+  },
+  render: args => /*#__PURE__*/_jsxs(RadialGradient, {
+    ...args,
+    children: [/*#__PURE__*/_jsx(Text, {
+      typography: "heading2SemiBold",
+      lx: {
+        color: 'base'
+      },
+      children: "With Children"
+    }), /*#__PURE__*/_jsx(Text, {
+      typography: "body2",
+      lx: {
+        color: 'base',
+        marginTop: 's8'
+      },
+      children: "Adapt height based on content."
+    }), /*#__PURE__*/_jsx(Text, {
+      typography: "body3",
+      lx: {
+        color: 'base',
+        marginTop: 's8'
+      },
+      children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos"
+    })]
+  })
+};
+export const WithMultipleStops = {
+  args: {
+    stops: [{
+      color: 'warning',
+      offset: 0,
+      opacity: 1
+    }, {
+      color: 'accent',
+      offset: 0.5,
+      opacity: 1
+    }, {
+      color: 'error',
+      offset: 1,
+      opacity: 1
+    }],
+    lx: {
+      height: 's80',
+      width: 's80',
+      borderRadius: 'full'
+    }
+  }
+};
+//# sourceMappingURL=RadialGradient.stories.js.map

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Box","Text","RadialGradient","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","layout","backgrounds","default","docs","source","language","format","type","Base","args","stops","color","opacity","lx","height","width","borderRadius","CenterPositionShowcase","render","positions","isSquare","items","center","x","y","label","flexDirection","gap","children","map","typography","marginBottom","flexWrap","alignItems","borderColor","borderWidth","WithChildren","padding","marginTop","WithMultipleStops","offset"],"sourceRoot":"../../../../../../../src","sources":["lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.test.js

@@ -0,0 +1,81 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import { Text } from 'react-native';
+import { ThemeProvider } from "../../../ThemeProvider/ThemeProvider.js";
+import { RadialGradient } from "./RadialGradient.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderWithProvider = component => {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    themes: ledgerLiveThemes,
+    colorScheme: "dark",
+    locale: "en",
+    children: component
+  }));
+};
+describe('RadialGradient', () => {
+  it('should have correct display name', () => {
+    expect(RadialGradient.displayName).toBe('RadialGradient');
+  });
+  it('should render children', () => {
+    renderWithProvider(/*#__PURE__*/_jsx(RadialGradient, {
+      stops: [{
+        color: '#FF6B6B'
+      }, {
+        color: '#4ECDC4'
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        children: "Child Content"
+      })
+    }));
+    expect(screen.getByText('Child Content')).toBeTruthy();
+  });
+  it('should forward ref', () => {
+    const ref = /*#__PURE__*/createRef();
+    renderWithProvider(/*#__PURE__*/_jsx(RadialGradient, {
+      ref: ref,
+      stops: [{
+        color: '#FF6B6B'
+      }, {
+        color: '#4ECDC4'
+      }]
+    }));
+    expect(ref.current).toBeTruthy();
+  });
+  it('should resolve lx style tokens', () => {
+    renderWithProvider(/*#__PURE__*/_jsx(RadialGradient, {
+      testID: "radial-gradient",
+      stops: [{
+        color: '#FF6B6B'
+      }, {
+        color: '#4ECDC4'
+      }],
+      lx: {
+        padding: 's16',
+        marginTop: 's8'
+      }
+    }));
+    const gradient = screen.getByTestId('radial-gradient');
+    expect(gradient.props.style.padding).toBe(16);
+    expect(gradient.props.style.marginTop).toBe(8);
+  });
+  it('should pass accessibility props', () => {
+    renderWithProvider(/*#__PURE__*/_jsx(RadialGradient, {
+      testID: "radial-gradient",
+      stops: [{
+        color: '#FF6B6B'
+      }, {
+        color: '#4ECDC4'
+      }],
+      accessibilityLabel: "Decorative gradient",
+      accessible: false
+    }));
+    const gradient = screen.getByTestId('radial-gradient');
+    expect(gradient.props.accessibilityLabel).toBe('Decorative gradient');
+    expect(gradient.props.accessible).toBe(false);
+  });
+});
+//# sourceMappingURL=RadialGradient.test.js.map

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","screen","React","createRef","Text","ThemeProvider","RadialGradient","jsx","_jsx","renderWithProvider","component","themes","colorScheme","locale","children","displayName","toBe","stops","color","getByText","toBeTruthy","ref","current","testID","lx","padding","marginTop","gradient","getByTestId","props","style","accessibilityLabel","accessible"],"sourceRoot":"../../../../../../../src","sources":["lib/Components/Utility/Gradient/RadialGradient/RadialGradient.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./RadialGradient.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../../src","sources":["lib/Components/Utility/Gradient/RadialGradient/index.ts"],"mappings":";;AAAA,cAAc,qBAAkB;AAChC,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Components/Utility/Gradient/RadialGradient/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../../src","sources":["lib/Components/Utility/Gradient/RadialGradient/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/Utility/Gradient/gradient.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=gradient.types.js.map

package/dist/module/lib/Components/Utility/Gradient/gradient.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../src","sources":["lib/Components/Utility/Gradient/gradient.types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/Utility/Gradient/utils/resolveGradientColor.js

@@ -0,0 +1,40 @@
+"use strict";
+
+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, bgColors) => {
+  const isBackgroundToken = color in bgColors;
+  if (isBackgroundToken) {
+    return bgColors[color];
+  }
+  return color;
+};
+
+/**
+ * Processes gradient stops by:
+ * 1. Resolving color tokens to actual values
+ * 2. Auto-spreading offsets if not provided
+ */
+export const processGradientStops = (stops, bgColors) => {
+  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
+    };
+  });
+};
+//# sourceMappingURL=resolveGradientColor.js.map

package/dist/module/lib/Components/Utility/Gradient/utils/resolveGradientColor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_OPACITY","DEFAULT_OFFSET","resolveGradientColor","color","bgColors","isBackgroundToken","processGradientStops","stops","stopCount","length","map","stop","index","resolvedColor","offset","undefined","opacity"],"sourceRoot":"../../../../../../../src","sources":["lib/Components/Utility/Gradient/utils/resolveGradientColor.ts"],"mappings":";;AAIA,MAAMA,eAAe,GAAG,CAAC;AACzB,MAAMC,cAAc,GAAG,CAAC;;AAExB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGA,CAClCC,KAAa,EACbC,QAA0B,KACf;EACX,MAAMC,iBAAiB,GAAGF,KAAK,IAAIC,QAAQ;EAC3C,IAAIC,iBAAiB,EAAE;IACrB,OAAOD,QAAQ,CAACD,KAAK,CAAyB;EAChD;EACA,OAAOA,KAAK;AACd,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,oBAAoB,GAAGA,CAClCC,KAAqB,EACrBH,QAA0B,KAKtB;EACJ,MAAMI,SAAS,GAAGD,KAAK,CAACE,MAAM;EAE9B,OAAOF,KAAK,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IAChC,MAAMC,aAAa,GAAGX,oBAAoB,CAACS,IAAI,CAACR,KAAK,EAAEC,QAAQ,CAAC;;IAEhE;IACA;IACA,MAAMU,MAAM,GACVH,IAAI,CAACG,MAAM,KAAKC,SAAS,GACrBJ,IAAI,CAACG,MAAM,GACXN,SAAS,KAAK,CAAC,GACbP,cAAc,GACdW,KAAK,IAAIJ,SAAS,GAAG,CAAC,CAAC;IAE/B,MAAMQ,OAAO,GAAGL,IAAI,CAACK,OAAO,KAAKD,SAAS,GAAGJ,IAAI,CAACK,OAAO,GAAGhB,eAAe;IAE3E,OAAO;MACLG,KAAK,EAAEU,aAAa;MACpBC,MAAM;MACNE;IACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Utility/Gradient/utils/resolveGradientColor.test.js

@@ -0,0 +1,151 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { resolveGradientColor, processGradientStops } from "./resolveGradientColor.js";
+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);
+    });
+  });
+});
+//# sourceMappingURL=resolveGradientColor.test.js.map