🎨 Aurora Design Tokens

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

🚀 Quick Start

Installation

npm install @jpm1475/aurora-design-tokens

React Usage

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

// 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

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

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

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

Typography

/* Desktop */
--typography-desktop-heading-1: 32px;
--typography-desktop-body: 16px;

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

Spacing

--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

// 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

# 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

Auto-generated from Aurora Design System workflow 🚀