API Reference
Complete reference documentation for Turbo Themes.
Quick Links
Token Overview
Turbo Themes provides semantic design tokens organized into categories:
Background Tokens
| Token | CSS Variable | Purpose |
|---|
| Base | --turbo-bg-base | Main page background |
| Surface | --turbo-bg-surface | Cards, elevated surfaces |
| Overlay | --turbo-bg-overlay | Modals, dropdowns |
Text Tokens
| Token | CSS Variable | Purpose |
|---|
| Primary | --turbo-text-primary | Main body text |
| Secondary | --turbo-text-secondary | Muted text |
| Inverse | --turbo-text-inverse | Text on colored backgrounds |
Brand Tokens
| Token | CSS Variable | Purpose |
|---|
| Primary | --turbo-brand-primary | Primary accent, CTAs |
State Tokens
| Token | CSS Variable | Purpose |
|---|
| Success | --turbo-state-success | Success messages |
| Warning | --turbo-state-warning | Warning messages |
| Danger | --turbo-state-danger | Error messages |
| Info | --turbo-state-info | Info messages |
Border Tokens
| Token | CSS Variable | Purpose |
|---|
| Default | --turbo-border-default | Standard borders |
Syntax Tokens
For code syntax highlighting:
| Token | CSS Variable | Purpose |
|---|
| Comment | --turbo-syntax-comment | Code comments |
| Keyword | --turbo-syntax-keyword | Language keywords |
| String | --turbo-syntax-string | String literals |
| Number | --turbo-syntax-number | Numeric values |
| Function | --turbo-syntax-function | Function names |
| Type | --turbo-syntax-type | Type annotations |
Package Exports
CSS Files
turbo-themes/
├── css/
│ ├── turbo-core.css # Token definitions
│ ├── turbo-base.css # Base styles
│ ├── turbo-syntax.css # Syntax highlighting
│ ├── themes/turbo/ # Theme files
│ │ ├── catppuccin-mocha.css
│ │ ├── catppuccin-latte.css
│ │ └── ...
│ └── adapters/
│ └── bulma.css # Bulma adapter
JavaScript/TypeScript
import { themeIds, type ThemeId } from 'turbo-themes';
// Array of all theme IDs
themeIds: string[]
// Theme ID type
type ThemeId = 'catppuccin-mocha' | 'catppuccin-latte' | ...
Next Steps