@3lens/themes

3Lens design system themes and styles for consistent UI across applications.

Overview

The @3lens/themes package provides:

• Complete Theme System - Dark, light, and high-contrast themes
• CSS Custom Properties - All design tokens as CSS variables
• Utility Classes - Pre-built component styles
• TypeScript Utilities - Programmatic theme management
• Framework Agnostic - Works with any framework or vanilla JavaScript

Installation

npm

npm install @3lens/themes

pnpm

pnpm add @3lens/themes

yarn

yarn add @3lens/themes

bun

bun add @3lens/themes

Quick Start

Import CSS

Import the complete styles (includes dark theme + base utilities):

import '@3lens/themes/styles.css';

Or import specific theme files:

// Dark theme (default)
import '@3lens/themes/theme-dark.css';
import '@3lens/themes/base.css';

// Light theme
import '@3lens/themes/theme-light.css';
import '@3lens/themes/base.css';

// High contrast theme
import '@3lens/themes/theme-high-contrast.css';
import '@3lens/themes/base.css';

Use CSS Variables

.my-component {
  background: var(--3lens-bg-primary);
  color: var(--3lens-text-primary);
  border-radius: var(--3lens-radius-md);
  padding: var(--3lens-spacing-md);
}

Use Utility Classes

<div class="lens-card">
  <h1 class="lens-text-primary">Title</h1>
  <p class="lens-text-secondary">Description</p>
  <button class="lens-button lens-button-primary">Action</button>
</div>

What's Included

• CSS Custom Properties - Complete reference of all CSS variables
• Themes - Dark, light, and high-contrast themes
• Utility Classes - Pre-built component styles
• TypeScript API - Programmatic theme management
• Framework Integration - React, Vue, Angular examples

Next Steps

• Learn about CSS Variables
• Explore available themes
• Check out utility classes
• See framework integration examples