open-index/open-npm huggingface dataset:
npm package: @ledgerhq/lumen-design-core
Description: **Design tokens and Tailwind presets for Ledger Design System** - Centralized design tokens that ensure consistency across React and React Native applications. All design tokens are automatically synchronized with Figma via the Figma REST API.
Latest version: 0.1.10

# @ledgerhq/lumen-design-core

**Design tokens and Tailwind presets for Ledger Design System** - Centralized design tokens that ensure consistency across React and React Native applications. All design tokens are automatically synchronized with Figma via the Figma REST API.

## 📦 Installation

```bash
npm install @ledgerhq/lumen-design-core

# Install required peer dependency
npm install tailwindcss@^4.1.17 @tailwindcss/postcss
```

**Note:** Tailwind CSS v4.x is the supported peer dependency.

## ⚡ Quick Setup

Create or update your `tailwind.config.js`:

```typescript
import type { Config } from 'tailwindcss';
import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';

const config = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@ledgerhq/lumen-ui-react/dist/lib/**/*.{js,ts,jsx,tsx}'],
  presets: [ledgerLivePreset],
} satisfies Config;

export default config;
```

## 🎨 Design Tokens

### Colors & Typography

```tsx
// Semantic colors that auto-adapt to light/dark themes
<div className="bg-canvas text-base">
<p className="text-muted">Secondary text</p>
<div className="bg-success text-success">Success state</div>

// Typography system
<h1 className="heading-1">Main Heading</h1>
<p className="body-1">Regular paragraph text</p>
```

### Spacing & Layout

1:1 pixel mapping where each number equals its pixel value:

```tsx
<div className="p-4 m-8 gap-12">  {/* padding: 4px, margin: 8px, gap: 12px */}
```

## 🌓 Dark Mode Support

All design tokens automatically support dark mode:

```tsx
<html className='dark'>
  <div className='bg-canvas text-base'>Dark mode content</div>
</html>
```

## 🔧 Alternative Usage

For non-Tailwind projects, use CSS custom properties:

```css
.my-component {
  background-color: var(--color-background-base);
  color: var(--color-text-base);
  padding: var(--spacing-16);
}
```

## 🔄 Token Synchronization

All design tokens are automatically kept in sync with Figma design files through:

- **Figma REST API integration** - Tokens are extracted directly from Figma design system
- **Automated updates** - Changes in Figma are automatically reflected in the token library
- **Version consistency** - Ensures perfect alignment between design and code

## 🔗 Links

- [📚 Full Documentation](https://ldls.vercel.app)
- [🎨 Setup Tailwind](https://ldls.vercel.app/?path=/docs/getting-started-setup-tailwind--docs)
- [🏠 Repository](https://github.com/LedgerHQ/lumen)
npm package: @ledgerhq/lumen-ui-rnative
Description: See docs: https://ldls.vercel.app/?path=/docs/react-native_getting-started-setup--docs
Latest version: 0.1.20

# @ledgerhq/lumen-ui-rnative

## 📦 Setup

See docs: https://ldls.vercel.app/?path=/docs/react-native_getting-started-setup--docs