npm package: @jpm1475/aurora-design-tokens
Description: Aurora Design System - Professional Design Tokens for React Applications
Author: Aurora Design System Team
Latest version: 1.3.39

# 🎨 Aurora Design Tokens

Professional design tokens for the Aurora Design System, optimized for React applications.

## 🚀 Quick Start

### **Installation**
```bash
npm install @jpm1475/aurora-design-tokens
```

### **React Usage**
```jsx
import '@jpm1475/aurora-design-tokens/css/shared-tokens.css';

function Button({ children, variant = 'primary' }) {
  return (
    <button 
      className={`button button--${variant}`}
      style={{
        '--button-bg': 'var(--color-aurora-blue-500)',
        '--button-text': 'var(--color-white)'
      }}
    >
      {children}
    </button>
  );
}
```

## 🎯 Available Formats

- **CSS Variables** - `@jpm1475/aurora-design-tokens/css/shared-tokens.css`
- **SCSS Variables** - `@jpm1475/aurora-design-tokens/scss/_shared-tokens.scss`
- **JavaScript Objects** - `@jpm1475/aurora-design-tokens/js/shared-tokens.js`

## 🔧 Framework Integration

### **React/Next.js**
```jsx
// Import in your app
import '@jpm1475/aurora-design-tokens/css/shared-tokens.css';

// Use CSS variables
const styles = {
  button: {
    backgroundColor: 'var(--color-aurora-blue-500)',
    padding: 'var(--spacing-scale-md)',
    borderRadius: 'var(--border-radius-md)'
  }
};
```

### **React Native**
```jsx
import tokens from '@jpm1475/aurora-design-tokens/js';

const styles = StyleSheet.create({
  button: {
    backgroundColor: tokens.colors.auroraBlue[500],
    padding: tokens.spacing.scale.md,
    borderRadius: tokens.borders.radius.md,
  }
});
```

## 🎨 Token Categories

### **Colors**
```css
/* Primary Colors */
--color-aurora-blue-500: #737f97;
--color-aurora-orange-500: #ff9e2c;

/* Semantic Colors */
--color-success: #34c759;
--color-warning: #ff9500;
--color-error: #ff3b30;
```

### **Typography**
```css
/* Desktop */
--typography-desktop-heading-1: 32px;
--typography-desktop-body: 16px;

/* Mobile */
--typography-mobile-heading-1: 24px;
--typography-mobile-body: 14px;
```

### **Spacing**
```css
--spacing-scale-xs: 4px;
--spacing-scale-sm: 8px;
--spacing-scale-md: 16px;
--spacing-scale-lg: 24px;
--spacing-scale-xl: 32px;
```

## 📊 Quality Reports

This package includes comprehensive quality and performance reports:

- **`reports/validation-report.json`** - Token validation results and quality metrics
- **`reports/performance-report.json`** - Build performance analysis and recommendations
- **`reports/quality-report.json`** - Quality gate validation results
- **`reports/performance-metrics.json`** - Historical performance data

### **Accessing Reports**
```javascript
// Import reports directly
import validationReport from '@jpm1475/aurora-design-tokens/reports/validation-report.json';
import performanceReport from '@jpm1475/aurora-design-tokens/reports/performance-report.json';
import qualityReport from '@jpm1475/aurora-design-tokens/reports/quality-report.json';

console.log('Quality Score:', qualityReport.summary.overallScore);
console.log('Performance:', performanceReport.summary.averageProcessingTime);
```

## 🔄 Updates

```bash
# Update to latest version
npm update @jpm1475/aurora-design-tokens

# Check version
npm list @jpm1475/aurora-design-tokens
```

## 📚 Documentation

For complete documentation, visit: [Aurora Design System](https://github.com/jpm1475/aurora-design-tokens)

---

*Auto-generated from Aurora Design System workflow* 🚀