admin
0 Followers · 0 Following
  • Joined on 2026-02-18
Repositories Projects Packages Public Activity Starred Repositories

@assemblcorp/themes (1.0.8)

Published 2026-02-28 21:04:24 +00:00 by admin

Installation

@assemblcorp:registry=
npm install @assemblcorp/themes@1.0.8
"@assemblcorp/themes": "1.0.8"

About this package

@assemblcorp/themes

Runtime theme management with 9 presets + interactive generator for visual theme customization.

Exports

Theme Presets: arctic, aurora, bloom, cosmic, ember-canvas, ocean, sage, sage2, slate

Store Hooks:

import {
  useThemeId,           // Current theme ID
  useColorScheme,       // 'light' | 'dark'
  useDensity,           // 'compact' | 'comfortable' | 'spacious'
  useBorderRadius,      // 'minimal' | 'subtle' | 'normal' | 'generous' | 'organic'
  useThemeActions,      // { setThemeId, setColorScheme, ... }
} from '@assemblcorp/themes'

Generator & Utilities:

import { ThemeGeneratorWizard } from '@assemblcorp/themes'
import { switchTheme, themeCache } from '@assemblcorp/themes'
import { initializeTheme } from '@assemblcorp/themes/browser'
import { useTextDirection, useIsRTL } from '@assemblcorp/themes'
import {
  generateWorldClassThemeBatch,
  iterateWorldClassThemeBatch,
} from '@assemblcorp/themes'

World-Class Theme Workflow (multi-direction + refinement):

const batch = generateWorldClassThemeBatch({
  primary: '#3B82F6',
  brandName: 'Acme',
  count: 5, // generate multiple distinct directions at once
})

const winner = batch.recommended

const refined = iterateWorldClassThemeBatch({
  previous: batch,
  selectedIds: winner ? [winner.id] : [],
  count: 5,
  exploration: 0.7, // push wider variation during refinement
})

Dependencies

{
  "@assemblcorp/shared": "workspace:*",
  "@assemblcorp/kernel": "workspace:*",
  "@assemblcorp/ui": "workspace:*",
  "zustand": "^5.0+",
  "oklab": "^1.0+"
}

Quick Start

App initialization (in head, before React):

import { initializeTheme } from '@assemblcorp/themes/browser'
initializeTheme()  // Apply saved theme, prevent FOUC

Using store hooks:

import { useThemeId, useColorScheme, useThemeActions } from '@assemblcorp/themes'

const themeId = useThemeId()
const { setColorScheme } = useThemeActions()
setColorScheme('dark')

Interactive wizard:

import { ThemeGeneratorWizard } from '@assemblcorp/themes'
<ThemeGeneratorWizard />

Load preset theme:

import { loadTheme } from '@assemblcorp/themes/presets'
const { primitiveTokens, semanticTokens } = loadTheme('aurora')

Theme switching with transitions:

import { switchTheme, hasViewTransitionsSupport } from '@assemblcorp/themes'

if (hasViewTransitionsSupport()) {
  await switchTheme('aurora')
}

Build

pnpm -C packages/themes build
pnpm -C packages/themes typecheck

Architecture

Directory Structure:

src/
├── runtime/          # ✅ PUBLIC: switchTheme, caching
├── browser.ts        # ✅ PUBLIC: browser-only initializeTheme entrypoint
├── stores/           # ✅ PUBLIC: Zustand hooks (useThemeId, useColorScheme, etc.)
├── wizard/           # ✅ PUBLIC: ThemeGeneratorWizard component
├── core/             # ❌ PRIVATE: Generation algorithms
├── archetypes/       # ❌ PRIVATE: Personality detection
└── types/            # ✅ PUBLIC: All exported types
presets/              # Theme preset JSON definitions

Key Design:

  • Zustand store for reactive state: useThemeId, useColorScheme, useDensity, useBorderRadius
  • CSS variable injection for runtime theming (no reload needed)
  • Preset themes: arctic, aurora, bloom, cosmic, ember-canvas, glass-apple, josh-comeau, neo, ocean, prairie-deco, sage2, slate, warm-editorial
  • Optional interactive wizard for custom theme creation
  • RTL support via useTextDirection hook

License

MIT

Dependencies

Dependencies

ID Version
@assemblcorp/kernel 1.0.8
@assemblcorp/shared 1.0.8
@texel/color ^1.1.11
neverthrow ^8.2.0
zustand ^5.0.11

Development Dependencies

ID Version
@types/react ^19.2.14
@typescript/native-preview 7.0.0-dev.20260225.1
radashi ^12.7.2
typescript npm:@typescript/native-preview@7.0.0-dev.20260225.1
vitest ^4.0.18

Peer Dependencies

ID Version
@base-ui/react ^1.0.0
react ^18.0.0 || ^19.0.0
react-dom ^18.0.0 || ^19.0.0

Keywords

theme themes oklch color design-system react tailwind jax-ui theme-generator design-tokens
Details
npm
2026-02-28 21:04:24 +00:00
827
Project Site
MIT
230 KiB
Assets (1)
themes-1.0.8.tgz 230 KiB
Versions (2) View all
1.0.9 2026-03-06
1.0.8 2026-02-28