npm package: @kung-fu/lcars
Description: LCARS CSS framework and style guide
Latest version: 0.0.1

# LCARS CSS Framework

A complete CSS framework for creating LCARS (Library Computer Access/Retrieval System) styled interfaces inspired by Star Trek.

## Installation

### Via NPM

```bash
npm install @kung-fu/lcars
```

```html
<link rel="stylesheet" href="path/to/lcars.css">
```

### Basic Usage

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My LCARS Interface</title>
    <link rel="stylesheet" href="lcars.css">
</head>
<body>
    <div class="page-container">
        <h1>LCARS Interface</h1>
        <button class="lcars-button">Primary Button</button>
        <button class="lcars-button lcars-button-blue">Secondary Button</button>
    </div>
</body>
</html>
```

## Components

### Buttons

Standard LCARS buttons with various color schemes:

```html
<button class="lcars-button">PRIMARY</button>
<button class="lcars-button lcars-button-blue">SECONDARY</button>
<button class="lcars-button lcars-button-purple">TERTIARY</button>
<button class="lcars-button lcars-button-red">ALERT</button>
```

Button sizes:
```html
<button class="lcars-button lcars-button-small">SMALL</button>
<button class="lcars-button">STANDARD</button>
<button class="lcars-button lcars-button-large">LARGE</button>
<button class="lcars-button lcars-button-wide">FULL WIDTH</button>
```

### Elbow Elements

Iconic LCARS corner elements:

```html
<div class="lcars-elbow-left lcars-orange">
  <div class="elbow-content">LEFT</div>
</div>
<div class="lcars-elbow-right lcars-blue">
  <div class="elbow-content">RIGHT</div>
</div>
<div class="lcars-elbow-top lcars-purple">
  <div class="elbow-content">TOP</div>
</div>
<div class="lcars-elbow-bottom lcars-red">
  <div class="elbow-content">BOTTOM</div>
</div>
```

### Panels

Data display containers:

```html
<div class="lcars-panel">
  <div class="lcars-panel-header">TACTICAL ANALYSIS</div>
  <p>Panel content goes here...</p>
</div>
```

### Progress Bars

Status and progress indicators:

```html
<div class="lcars-progress">
  <div class="lcars-progress-bar" style="width: 75%;">SHIELDS 75%</div>
</div>
<div class="lcars-progress">
  <div class="lcars-progress-bar lcars-bg-red" style="width: 45%;">HULL INTEGRITY 45%</div>
</div>
```

### Terminal Display

Command-line interface styling:

```html
<div class="lcars-terminal">
  <div class="lcars-terminal-line">LCARS TERMINAL INTERFACE v47.0.1</div>
  <div class="lcars-terminal-line lcars-terminal-prompt">STATUS REPORT</div>
  <div class="lcars-terminal-line">WARP CORE: ONLINE</div>
  <div class="lcars-terminal-line">SHIELDS: 100%</div>
</div>
```

### Status Grid

Grid-based status monitoring:

```html
<div class="lcars-status-grid">
  <div class="lcars-status-cell active">01</div>
  <div class="lcars-status-cell warning">02</div>
  <div class="lcars-status-cell error">03</div>
  <div class="lcars-status-cell active">04</div>
</div>
```

### Audio Indicators

Animated audio level bars:

```html
<div class="lcars-audio-indicator">
  <span>AUDIO LEVEL</span>
  <div class="lcars-audio-bars">
    <div class="lcars-audio-bar"></div>
    <div class="lcars-audio-bar"></div>
    <div class="lcars-audio-bar"></div>
    <div class="lcars-audio-bar"></div>
    <div class="lcars-audio-bar"></div>
  </div>
</div>
```

### Alert States

Emergency alert animations:

```html
<button class="lcars-button lcars-alert-red">RED ALERT</button>
<button class="lcars-button lcars-alert-yellow">YELLOW ALERT</button>
```

### Layout Elements

Brackets and spacers:

```html
<div class="lcars-bracket">
  <div class="lcars-bracket-left"></div>
  <div class="lcars-bracket-content">GROUPED CONTENT</div>
  <div class="lcars-bracket-right"></div>
</div>

<div class="lcars-spacer"></div>
<div class="lcars-bar">SYSTEM STATUS BAR</div>
```

### Grid System

Flexible layout utilities:

```html
<div class="lcars-grid">
  <button class="lcars-button lcars-u-3">BUTTON 1</button>
  <button class="lcars-button lcars-u-3">BUTTON 2</button>
</div>
```

Size classes: `lcars-u-1` through `lcars-u-6` (width), `lcars-h-1` through `lcars-h-3` (height)

### Color Classes

Apply LCARS colors to any element:

- `lcars-orange` (primary)
- `lcars-blue` (secondary) 
- `lcars-purple` (tertiary)
- `lcars-red` (alerts)
- `lcars-yellow` (warnings)
- `lcars-green` (success)

## Browser Support

- Modern browsers with CSS Grid and Flexbox support
- CSS custom properties required
- No IE11 support (modern web standards only)

## Customization

The framework uses CSS custom properties for easy theming:

```css
:root {
  --lcars-orange: #ff9900;
  --lcars-blue: #0099ff;
  /* Override colors as needed */
}
```

## Accessibility

- Ensure sufficient color contrast ratios
- Add proper ARIA labels to interactive elements
- Test with keyboard navigation
- Verify screen reader compatibility

## Legal Notice

Star Trek and LCARS are trademarks and copyrights of CBS Studios Inc. (now part of Paramount Global). This CSS framework is an independent implementation inspired by the LCARS interface design and is not affiliated with, endorsed by, or sponsored by CBS Studios Inc. or Paramount Global.

This framework is provided for educational and non-commercial use. Users should ensure compliance with applicable trademark and copyright laws.

## License

MIT License - see LICENSE file for details