npm package: @skewedaspect/sleekspace-ui
Description: A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system
Author: Christopher S. Case
Latest version: 0.7.1

# SleekSpace UI

A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system.

## Features

- **Modern Vue 3** - Built with Composition API and full TypeScript support
- **OKLCH Color Space** - Perceptually uniform colors with runtime theming
- **Design Token System** - Three-tier hierarchy (Foundation → Semantic → Component)
- **Beveled Corners** - Native `corner-shape: bevel` with fallbacks
- **Tailwind CSS v4** - Seamless integration via `@theme` system
- **Custom Colors** - Per-component color overrides
- **IDE Support** - Auto-generated types for Volar and WebStorm

## Installation

```bash
npm install @skewedaspect/sleekspace-ui
```

## Quick Start

### As a Plugin

```js
import { createApp } from 'vue'
import SleekSpaceUI from '@skewedaspect/sleekspace-ui'
import '@skewedaspect/sleekspace-ui/style'

const app = createApp(App)
app.use(SleekSpaceUI)
app.mount('#app')
```

### Individual Components

```vue
<script setup>
import { SkButton, SkPanel } from '@skewedaspect/sleekspace-ui'
import '@skewedaspect/sleekspace-ui/style'
</script>

<template>
  <SkPanel kind="primary" size="lg">
    <SkButton kind="accent" variant="solid">
      Click Me
    </SkButton>
  </SkPanel>
</template>
```

## Documentation

- **[Getting Started](docs/getting-started.md)** - Installation and basic usage
- **[TypeScript Setup](docs/typescript.md)** - IDE configuration and type support
- **[Theming](docs/theming.md)** - Runtime themes and custom colors
- **[Tailwind Integration](docs/tailwind.md)** - Using tokens with Tailwind CSS v4
- **[Design Tokens](docs/design-tokens.md)** - Token system architecture
- **[Components](docs/components.md)** - Component reference
- **[Development](docs/development.md)** - Contributing and testing

## Component Kinds

Components support semantic color kinds for consistent theming:

```vue
<SkButton kind="primary">Primary Action</SkButton>
<SkButton kind="danger">Delete</SkButton>
<SkAlert kind="success">Operation successful!</SkAlert>
<SkPanel kind="info">Information panel</SkPanel>
```

Available kinds: `neutral`, `primary`, `accent`, `info`, `success`, `warning`, `danger`

## Custom Colors

Override component colors on a per-instance basis:

```vue
<SkButton
  base-color="oklch(0.7 0.25 300)"
  text-color="white"
>
  Custom Purple Button
</SkButton>
```

## Development

```bash
npm install                    # Install dependencies
npm run dev                    # Start library watch + demo site
npm run build                  # Build everything
npm test                       # Run tests
npm run lint                   # Lint all workspaces
```

The demo site runs at `http://localhost:3030` and provides live preview of all components with hot reload. This is the recommended way to develop and test components.

See [Development Guide](docs/development.md) for detailed information.

## Project Structure

This is a monorepo using npm workspaces:

- `packages/sleekspace-ui` - Component library
- `packages/docs-site` - Demo and documentation site

## License

MIT © Christopher S. Case