npm package: @loudpacks/theme-definitions
Description: Theme color definitions for @loudpacks theme switcher - all 10 themes with light and dark variants
Author: Noted
Latest version: 0.2.0

# @loudpacks/theme-definitions

Theme color definitions for the @loudpacks theme switcher system. Contains all 10 themes with exact colors extracted from the Noted app.

## Overview

This package provides 360 precisely defined colors across 10 themes, each with light and dark variants. Every theme includes 18 color properties covering all UI elements from backgrounds to interactive states.

**Total Colors**: 360 (10 themes × 2 variants × 18 properties)

## Installation

```bash
pnpm add @loudpacks/theme-definitions
```

## Usage

```typescript
import {
  THEMES,
  DEFAULT_THEME_NAME,
  DEFAULT_COLOR_SCHEME,
  type ThemeName,
  type ColorScheme
} from '@loudpacks/theme-definitions';

// Access a specific theme
const monochromeTheme = THEMES.monochrome;
console.log(monochromeTheme.displayName); // "Monochrome"
console.log(monochromeTheme.light.background); // "#fafafa"

// Use default constants
console.log(DEFAULT_THEME_NAME); // "monochrome"
console.log(DEFAULT_COLOR_SCHEME); // "system"

// Type-safe theme access
const themeName: ThemeName = 'ocean';
const theme = THEMES[themeName];
```

## Available Themes

### 1. Monochrome (Default)
Clean monochrome design with neutral grays

- **Light**: Soft white background (#fafafa) with dark gray text
- **Dark**: Deep charcoal background (#121212) with light gray text
- **Best for**: Minimal distraction, professional look

### 2. Ocean
Vibrant teal aesthetic for refreshing design

- **Light**: Cool mint background (#f0faf9) with teal accents (#14b8a6)
- **Dark**: Deep ocean background (#0f1f1e) with aqua accents (#5eead4)
- **Best for**: Calm, refreshing interface

### 3. Sepia
Warm vintage aesthetic for comfortable reading

- **Light**: Warm beige background (#f5f1e8) with brown tones
- **Dark**: Rich brown background (#1a1612) with warm accents
- **Best for**: Long reading sessions, eye comfort

### 4. Nord
Cool Arctic-inspired palette for focused work

- **Light**: Pale blue-gray background (#eceff4) with nordic blues
- **Dark**: Slate background (#2e3440) with frost blues (#88c0d0)
- **Best for**: Developer tools, focused work

### 5. Crimson
Rich red aesthetic for bold design

- **Light**: Soft pink background (#fef5f5) with crimson accents (#dc143c)
- **Dark**: Deep burgundy background (#1f1212) with coral accents
- **Best for**: Bold statements, passion projects

### 6. Forest
Natural green aesthetic for calm and focused work

- **Light**: Soft sage background (#f0f4f0) with forest greens
- **Dark**: Deep forest background (#1a2419) with natural greens
- **Best for**: Nature-inspired apps, wellness

### 7. Lavender
Soft purple aesthetic for creative work

- **Light**: Pale lavender background (#f5f3f8) with purple tones
- **Dark**: Rich plum background (#1e1a24) with soft purples
- **Best for**: Creative apps, artistic projects

### 8. Amber
Warm amber tones for energetic focus

- **Light**: Warm cream background (#fef5f0) with amber accents (#d87a3a)
- **Dark**: Deep brown background (#1f1810) with golden amber
- **Best for**: Warm, energetic interfaces

### 9. Midnight
True black for OLED screens and maximum contrast

- **Light**: Cool gray background (#f5f5f7) with cyan accents (#00d4ff)
- **Dark**: Pure black background (#000000) with bright cyan
- **Best for**: OLED devices, maximum contrast

### 10. Rose
Soft rose aesthetic for gentle, modern design

- **Light**: Blush background (#fef5f7) with rose accents (#c76b7a)
- **Dark**: Deep burgundy-rose background (#1f1719) with soft pinks
- **Best for**: Gentle, modern, romantic designs

## Type Definitions

### ThemeName
```typescript
type ThemeName =
  | 'monochrome'
  | 'ocean'
  | 'sepia'
  | 'nord'
  | 'crimson'
  | 'forest'
  | 'lavender'
  | 'amber'
  | 'midnight'
  | 'rose';
```

### ColorScheme
Each theme variant includes 18 color properties:

```typescript
interface ColorScheme {
  background: string;        // Main background color
  surface: string;           // Surface/card background
  text: string;              // Primary text color
  textSecondary: string;     // Secondary/muted text
  border: string;            // Border color
  tint: string;              // Primary accent/tint color
  icon: string;              // Icon color
  tabIconDefault: string;    // Inactive tab icon
  tabIconSelected: string;   // Active tab icon
  elevatedSurface: string;   // Elevated card/modal background
  selectedSurface: string;   // Selected item background
  overlay: string;           // Modal overlay (rgba)
  hover: string;             // Hover state background
  pressed: string;           // Pressed state background
  disabled: string;          // Disabled state color
  highlight: string;         // Highlight/selection color
  linkColor: string;         // Hyperlink color
  accentSecondary: string;   // Secondary accent color
}
```

### ThemeMetadata
```typescript
interface ThemeMetadata {
  displayName: string;       // Human-readable name
  description: string;       // Theme description
  light: ColorScheme;        // Light variant colors
  dark: ColorScheme;         // Dark variant colors
}
```

### ColorSchemeMode
```typescript
type ColorSchemeMode = 'light' | 'dark' | 'system';
```

## Constants

```typescript
export const DEFAULT_THEME_NAME: ThemeName = 'monochrome';
export const DEFAULT_COLOR_SCHEME: ColorSchemeMode = 'system';
export const VALID_THEME_NAMES: readonly ThemeName[] = [
  'monochrome', 'ocean', 'sepia', 'nord', 'crimson',
  'forest', 'lavender', 'amber', 'midnight', 'rose'
];
```

## Package Structure

```
@loudpacks/theme-definitions/
├── dist/
│   ├── index.js         # CommonJS build
│   ├── index.mjs        # ESM build
│   └── index.d.ts       # TypeScript declarations
└── src/
    ├── types.ts         # Type definitions
    ├── constants.ts     # Default values
    ├── themes.ts        # Theme color data (auto-generated)
    └── index.ts         # Main exports
```

## Development

This package uses automated color extraction from the Noted app specifications:

```bash
# Regenerate themes from specifications
pnpm tsx scripts/parse-themes.ts

# Build package
pnpm --filter @loudpacks/theme-definitions build

# Run tests
pnpm --filter @loudpacks/theme-definitions test
```

**Note**: `themes.ts` is auto-generated. Do not edit manually.

## Related Packages

- `@loudpacks/theme-core` - Core theme logic and utilities
- `@loudpacks/theme-web` - Next.js implementation
- `@loudpacks/theme-native` - React Native implementation

## License

MIT