open-index/open-npm huggingface dataset:
npm package: @ledgerhq/ldls-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.0.33

# @ledgerhq/ldls-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/ldls-design-core

# Install required peer dependency
npm install tailwindcss
```

**Note:** Tailwind CSS v3.x is required as a peer dependency. Not compatible yet with Tailwind CSS v4.

## ⚡ Quick Setup

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

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

const config = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@ledgerhq/ldls-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/ldls)
npm package: @ledgerhq/ldls-ui-rnative
Description: **React Native UI component library for Ledger Design System** - Native mobile components built with NativeWind and design tokens.
Latest version: 0.0.41

# @ledgerhq/ldls-ui-rnative

**React Native UI component library for Ledger Design System** - Native mobile components built with NativeWind and design tokens.

## 📦 Installation

```bash
npm install @ledgerhq/ldls-ui-rnative @ledgerhq/ldls-design-core

# Install peer dependencies
npm install react-native-svg nativewind
```

→ [View @ledgerhq/ldls-ui-rnative on npm](https://www.npmjs.com/package/@ledgerhq/ldls-ui-rnative?activeTab=readme)  
→ [View @ledgerhq/ldls-design-core on npm](https://www.npmjs.com/package/@ledgerhq/ldls-design-core?activeTab=readme)

## ⚡ Setup

### 1. Configure NativeWind

Install and configure NativeWind in your React Native project:

```bash
npm install nativewind
npm install --dev tailwindcss
```

Create `tailwind.config.js`:

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

const config = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@ledgerhq/ldls-ui-rnative/src/**/*.{js,jsx,ts,tsx}"
  ],
  presets: [ledgerLivePreset],
} satisfies Config;

export default config;
```

_Using [@ledgerhq/ldls-design-core](https://www.npmjs.com/package/@ledgerhq/ldls-design-core?activeTab=readme) preset_

### 2. Start Using Components

```tsx
import { Button } from '@ledgerhq/ldls-ui-rnative';
import { ArrowRight } from '@ledgerhq/ldls-ui-rnative/symbols';

export default function App() {
  return (
    <Button appearance="accent" icon={ArrowRight}>
      Get Started
    </Button>
  );
}
```
---

## 🔧 Icon Usage

```tsx
import { Settings, ArrowRight, CheckCircle } from '@ledgerhq/ldls-ui-rnative/symbols';

// Use icons directly as components with size prop
<Settings size={24} />
<ArrowRight size={20} className="text-accent" />
<CheckCircle size={16} />

// Available sizes: 16, 20, 24, 40, 48, 56
```

---

## 📚 Documentation

- [📱 React Native Setup Guide](https://nativewind.dev/getting-started/react-native)
- [🏠 Main Repository](https://github.com/LedgerHQ/ldls)