@ledgerhq/ldls-design-core
v0.0.33
Published
**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.
Readme
@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
npm install @ledgerhq/ldls-design-core
# Install required peer dependency
npm install tailwindcssNote: 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:
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
// 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:
<div className="p-4 m-8 gap-12"> {/* padding: 4px, margin: 8px, gap: 12px */}🌓 Dark Mode Support
All design tokens automatically support dark mode:
<html className='dark'>
<div className='bg-canvas text-base'>Dark mode content</div>
</html>🔧 Alternative Usage
For non-Tailwind projects, use CSS custom properties:
.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