@usetheo/ui 0.3.0-next.0 → 0.4.0-next.0

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.0-next.0] - 2026-05-22
+
+Minor bump — public API gains 7 new theme exports. Zero visual break for
+consumers in 0.3.x (default theme remains `violet-forge`).
+
+### Added
+
+- **7 new built-in themes (2026-05-22, RFC 0007)** — `vercelMono`, `githubDark`, `dracula`, `oneDark`, `anthropicStyle`, `openaiStyle`, `linearGlass`. `builtinThemes` grows from 3 to 10 entries. Each ships light + dark mode. Derivative slugs from brand names use suffixes (`-mono`, `-style`, `-glass`) and descriptions include "Inspired by, not affiliated with [Company]" per D1.1 ADR (trademark protection / no false-affiliation). Canonical OSS themes (Dracula, One Dark, GitHub Dark) keep their reusable names. Bundle delta: ~60 KB CSS injection if consumer passes `builtinThemes` (alternative: `themes={[violetForge, dracula]}` for ~12 KB). (#TBD)
+- **`validateThemeContrast` quality gate (2026-05-22)** — Pure-JS WCAG 2.1 contrast validator in `scripts/lib/wcag-contrast.ts` + gate in `validate-quality-gates.ts`. Iterates 10 themes × 2 modes × 4 high-stakes pairs, enforces 4.5:1 (body) and 3:1 (large/button) thresholds. Runs <50ms. Caught 14 pre-existing AA failures in `violet-forge`, `classic-paper`, `aurora-terminal` accent contrast; `classic-paper` accent darkened from `37 92% 50%` → `37 92% 40%` and `openai-style` dark primary darkened from `155 78% 43%` → `155 78% 30%` to satisfy the gate. (#TBD)
+- **`scripts/lib/wcag-contrast.ts` + `.test.ts` (NEW)** — Pure functions `parseHsl`, `hslToLuminance`, `contrastRatio`. 9 tests cover edge cases (achromatic, hue overflow, percent stripping — EC-3). (#TBD)
+
 ## [0.3.0-next.0] - 2026-05-22
 
 Minor bump — visual defaults realigned to FAANG-modern density baseline

package/dist/index.d.ts

@@ -362,9 +362,92 @@ declare function hex(input: string): string;
  */
 declare function rgb(r: number, g: number, b: number): string;
 
+/**
+ * Vercel Mono — razor-sharp monochrome + signature blue.
+ *
+ * Inspired by, not affiliated with Vercel. Based on Geist Design tokens
+ * (https://github.com/vercel/geist). Light = pure white + black ink + blue
+ * accent (#0070F3); dark = near-black canvas + white text + same blue.
+ *
+ * Plan: .claude/knowledge-base/plans/seven-themes-plan.md T2.1
+ */
+declare const vercelMono: Theme;
+
+/**
+ * GitHub Dark — GitHub's default dark theme.
+ *
+ * Based on the canonical Primer Primitives tokens
+ * (https://github.com/primer/primitives, MIT). Light fallback uses GitHub's
+ * "light-default" Primer scale.
+ *
+ * Plan: .claude/knowledge-base/plans/seven-themes-plan.md T3.1
+ */
+declare const githubDark: Theme;
+
+/**
+ * Dracula — the cult OSS dark theme (https://draculatheme.com, MIT).
+ *
+ * Dark mode = canonical Dracula spec (background #282A36, signature pink
+ * #FF79C6, purple #BD93F9, etc.).
+ *
+ * Note: "light" mode is a Theo-original adaptation — Dracula upstream
+ * spec is dark-only. We darken the signature pink/purple to pass WCAG AA
+ * against light backgrounds, sacrificing palette purity for accessibility.
+ *
+ * Plan: .claude/knowledge-base/plans/seven-themes-plan.md T4.1
+ */
+declare const dracula: Theme;
+
+/**
+ * One Dark / One Light — Atom's iconic syntax theme.
+ *
+ * Sources:
+ *   - atom/one-dark-syntax (MIT) — dark mode canonical
+ *   - atom/one-light-syntax (MIT) — light mode canonical
+ *
+ * Plan: .claude/knowledge-base/plans/seven-themes-plan.md T5.1
+ */
+declare const oneDark: Theme;
+
+/**
+ * Anthropic-style — claude.ai-inspired editorial calm.
+ *
+ * Inspired by, not affiliated with Anthropic. Visually informed by claude.ai's
+ * warm cream canvas + burnt sienna primary + ink-on-paper feel. No proprietary
+ * assets reproduced (font is Geist, colors are independent measurements).
+ *
+ * Plan: .claude/knowledge-base/plans/seven-themes-plan.md T6.1
+ */
+declare const anthropicStyle: Theme;
+
+/**
+ * OpenAI-style — chatgpt.com-inspired minimal tech-utility.
+ *
+ * Inspired by, not affiliated with OpenAI. Pure white / charcoal canvas +
+ * signature ChatGPT green (#10A37F). Minimal saturation, high contrast.
+ *
+ * Plan: .claude/knowledge-base/plans/seven-themes-plan.md T7.1
+ */
+declare const openaiStyle: Theme;
+
+/**
+ * Linear Glass — linear.app-inspired glassy indigo.
+ *
+ * Inspired by, not affiliated with Linear. Refined indigo-violet primary
+ * (#5E6AD2) on near-black canvas in dark, pure white in light. Subtle
+ * glassmorphic surface temperature.
+ *
+ * Plan: .claude/knowledge-base/plans/seven-themes-plan.md T8.1
+ */
+declare const linearGlass: Theme;
+
 /**
  * All themes bundled with Theo UI. Pass to `<ThemeProvider themes={builtinThemes}>`
- * if you want all of them available out of the box.
+ * if you want all 10 available out of the box.
+ *
+ * EC-4 note: passing the full 10-entry list triggers ~60 KB CSS injection in
+ * `<style id="theo-ui-theme-vars">`. For apps focused on 1-2 themes, prefer
+ * `themes={[violetForge, dracula]}` to keep the payload at ~12 KB.
  */
 declare const builtinThemes: Theme[];
 
@@ -3286,4 +3369,4 @@ interface CommandPaletteProps {
  */
 declare function CommandPalette({ open, onOpenChange, items, onSelect, placeholder, emptyMessage, filter, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
-export { ALL_MODES, AgentComposer, type AgentDraft, AgentEditor, AgentErrorCard, type AgentErrorKind, AgentEvent, type AgentEvent$1 as AgentEventModel, type AgentEventStatus, type AgentEventType, AgentHandoff, AgentProfile, type AgentProfileDescriptor, AgentStartingState, AgentStream, type AgentStreamItem, AgentStreaming, AgentTimeline, ApprovalCard, type ApprovalSeverity, ArtifactPreview, type Attachment, AttachmentChip, type AuditActorKind, type AuditEntry, AuditLogEntry, type AuditSeverity, AutoCompactNotice, Avatar, BadgeWithDot as Badge, type BadgeProps, BrowserControls, BuildLogStream, Button, type ButtonProps, type Capability, CapabilityIndicator, type CapabilityState, Card, ChatComposer, ChatMessage, ChatThread, Checkbox, type ColorScale, type CommandItem, CommandPalette, type ComposerMode, ContextCard, ContextWindowBar, CostMeter, type CreatedFile, CreatedFilesCard, type CronJob, CronJobCard, type CronJobStatus, CronJobsList, type DefineThemeInput, type Density, type DensityContextValue, type Deployment, DeploymentRow, type DeploymentStatus, Dialog, type DiffHunk, type DiffLine, type DiffLineKind, DiffViewer, type Domain, DomainConfig, type DomainStatus, EmptyState, type EnvScope, type EnvVar, EnvVarEditor, FolderContextCard, type FolderEntry, FolderSelector, FormField, HOOK_EVENTS, type HandoffParty, HookConfig, type HookEntry, type HookEvent, type HookEventEntry, HookEventLog, type HookEventResult, Input, type InputProps, type IntentOption, IntentSelector, Label, type Lane, LaneBoard, type LaneCard, type LaneState, type LogLevel, type LogLine, LoginSplit, type MCPServer, MCPServerCard, MCPServerList, type MCPServerStatus, MODE_LABEL, MemoryEditor, type MemoryLayer, type MemoryScope, type MentionItem, MentionMenu, type MentionTrigger, type Message, type MessageRole, type Metric, MetricsPanel, type Mode, type ModelCapabilityFlag, ModelCard, type ModelInfo, type ModelOption, ModelSelector, type PermissionDecision, type PermissionDecisionKind, PermissionMatrix, PermissionModal, type PermissionOperation, type PermissionRequest, type PermissionRule, type PlanNode, type PlanNodeStatus, type PreviewEnv, PreviewEnvCard, PreviewPanel, type PreviewService, ProgressChecklist, type Project, ProjectCard, type ProjectStatus, ProjectSwitcher, type QuickAction, QuickActionChips, RadioGroup, type RailStep, type RecentFolder, RecentFoldersList, type RollbackTarget, RollbackUI, type Rule, RuleCard, RuleEditor, type RuleScope, type RuleState, RunStats, type RunningTaskItem, type RunningTaskStatus, RunningTasksPanel, ScrollArea, Select, SessionListItem, type SessionMode, type SessionRunStatus, type SessionStatus, type SessionSummary, SessionTimeline, Sheet, Sidebar, Skeleton, type Skill, SkillCard, SkillEditor, type SkillSource, type SkillState, SkillsList, SocialAuthRow, type SocialProvider, StepsRail, SubAgentDispatch, type SubAgentRun, type SubAgentState, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, type TaskSource, type TaskStatus, type TaskStep, type TaskStepStatus, type TerminalLine, TerminalPanel, Textarea, type TextareaProps, type Theme, type ThemeFonts, type ThemeMode, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, type TheoUIProviderProps, Toast, type ToastVariant, Toaster, TokenUsageChart, type TokenUsagePoint, ToolCall, ToolCallCard, type ToolCallStatus, type ToolEnablement, type ToolEntry, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, hex, modelCapabilityPresets, rgb, sheetVariants, useDensity, useTheme, useToast, violetForge };
+export { ALL_MODES, AgentComposer, type AgentDraft, AgentEditor, AgentErrorCard, type AgentErrorKind, AgentEvent, type AgentEvent$1 as AgentEventModel, type AgentEventStatus, type AgentEventType, AgentHandoff, AgentProfile, type AgentProfileDescriptor, AgentStartingState, AgentStream, type AgentStreamItem, AgentStreaming, AgentTimeline, ApprovalCard, type ApprovalSeverity, ArtifactPreview, type Attachment, AttachmentChip, type AuditActorKind, type AuditEntry, AuditLogEntry, type AuditSeverity, AutoCompactNotice, Avatar, BadgeWithDot as Badge, type BadgeProps, BrowserControls, BuildLogStream, Button, type ButtonProps, type Capability, CapabilityIndicator, type CapabilityState, Card, ChatComposer, ChatMessage, ChatThread, Checkbox, type ColorScale, type CommandItem, CommandPalette, type ComposerMode, ContextCard, ContextWindowBar, CostMeter, type CreatedFile, CreatedFilesCard, type CronJob, CronJobCard, type CronJobStatus, CronJobsList, type DefineThemeInput, type Density, type DensityContextValue, type Deployment, DeploymentRow, type DeploymentStatus, Dialog, type DiffHunk, type DiffLine, type DiffLineKind, DiffViewer, type Domain, DomainConfig, type DomainStatus, EmptyState, type EnvScope, type EnvVar, EnvVarEditor, FolderContextCard, type FolderEntry, FolderSelector, FormField, HOOK_EVENTS, type HandoffParty, HookConfig, type HookEntry, type HookEvent, type HookEventEntry, HookEventLog, type HookEventResult, Input, type InputProps, type IntentOption, IntentSelector, Label, type Lane, LaneBoard, type LaneCard, type LaneState, type LogLevel, type LogLine, LoginSplit, type MCPServer, MCPServerCard, MCPServerList, type MCPServerStatus, MODE_LABEL, MemoryEditor, type MemoryLayer, type MemoryScope, type MentionItem, MentionMenu, type MentionTrigger, type Message, type MessageRole, type Metric, MetricsPanel, type Mode, type ModelCapabilityFlag, ModelCard, type ModelInfo, type ModelOption, ModelSelector, type PermissionDecision, type PermissionDecisionKind, PermissionMatrix, PermissionModal, type PermissionOperation, type PermissionRequest, type PermissionRule, type PlanNode, type PlanNodeStatus, type PreviewEnv, PreviewEnvCard, PreviewPanel, type PreviewService, ProgressChecklist, type Project, ProjectCard, type ProjectStatus, ProjectSwitcher, type QuickAction, QuickActionChips, RadioGroup, type RailStep, type RecentFolder, RecentFoldersList, type RollbackTarget, RollbackUI, type Rule, RuleCard, RuleEditor, type RuleScope, type RuleState, RunStats, type RunningTaskItem, type RunningTaskStatus, RunningTasksPanel, ScrollArea, Select, SessionListItem, type SessionMode, type SessionRunStatus, type SessionStatus, type SessionSummary, SessionTimeline, Sheet, Sidebar, Skeleton, type Skill, SkillCard, SkillEditor, type SkillSource, type SkillState, SkillsList, SocialAuthRow, type SocialProvider, StepsRail, SubAgentDispatch, type SubAgentRun, type SubAgentState, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, type TaskSource, type TaskStatus, type TaskStep, type TaskStepStatus, type TerminalLine, TerminalPanel, Textarea, type TextareaProps, type Theme, type ThemeFonts, type ThemeMode, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, type TheoUIProviderProps, Toast, type ToastVariant, Toaster, TokenUsageChart, type TokenUsagePoint, ToolCall, ToolCallCard, type ToolCallStatus, type ToolEnablement, type ToolEntry, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, anthropicStyle, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, defineTheme, dracula, githubDark, hex, linearGlass, modelCapabilityPresets, oneDark, openaiStyle, rgb, sheetVariants, useDensity, useTheme, useToast, vercelMono, violetForge };