Aplica DS — V3
Context
V3 is the current phase of Aplica DS (2024–present). It is the distribution phase: everything proven in V2 was repackaged so that any team can adopt it without forking or copying internal files.
The two structural changes that define V3:
- Package-first —
@aplica/aplica-theme-engineis published as a standalone npm package. Consumers install it as a dependency instead of copying source files. - Consumer workspace model — configuration and data live entirely in the consumer project. The package is a pure engine; it brings no opinions about brand, colors, or typography.
The Great Shift: From Copy to Package
In V2, teams adopted the Theme Engine by copying or forking the repository. Updates required manual merging. V3 replaced this model:
| V2 | V3 | |
|---|---|---|
| Adoption | Copy / fork | npm install @aplica/aplica-theme-engine |
| Configuration | In the engine repo | In the consumer project (aplica.config.mjs) |
| Updates | Manual merge | npm update + migration bundle |
| Schema ownership | Engine-controlled | Consumer can override via paths.schemasDir |
V3 Innovations
1. Standalone npm Package
npm install @aplica/aplica-theme-engine
The package exposes:
defineThemeEngineConfig()— public configuration API with full TypeScript inference/config— importable config helpers/transformers/config— extensibility hooks for custom transformers
2. Consumer Workspace Scaffolding
npx theme-engine init
Interactive wizard that creates:
aplica.config.mjs— project configurationdata/— schema and architecture filesdist/— build output directory
Alternatively, --template <starter> skips the wizard.
3. Automated V2 Migration
npx theme-engine migrate:legacy-consumer
Three subcommands for safe migration from pre-V3 monolithic projects:
| Subcommand | Purpose |
|---|---|
analyze | Reports what needs to change |
convert | Applies the migration automatically |
compare | Diffs the before/after state |
4. Figma Integration via figma:generate
npx theme-engine figma:generate
Generates and maintains the three files Tokens Studio requires:
| File | Purpose |
|---|---|
data/$themes.json | Theme configuration for Tokens Studio |
data/$themes.engine.json.template | Template for engine-managed fields |
data/$metadata.json | Token metadata |
Stable IDs via SHA1 of "group:name" — no random IDs that force re-sync in Figma. Figma-owned fields (id, $figmaStyleReferences, variableIDs) are preserved on every run.
5. Foundation Styles as CSS Classes
V3 graduated Foundation Styles — introduced in V2 2.26.0 — as the primary consumption path for component authors and AI agents:
# Generated by the engine
dist/css/foundation/{brand}/typography.css
dist/css/foundation/{brand}/elevation.css
Each class is a composite: typography classes bundle 7 CSS properties referencing semantic tokens; elevation classes bundle box-shadow per level. Values resolve at runtime from the active theme file — theme switching updates them automatically.
6. AI Skills Injection Program
npx theme-engine ai:init
Injects editor-specific context files into the consumer workspace:
| Destination | Tool |
|---|---|
docs/context/ | All AI agents (shared) |
.cursor/rules/ | Cursor |
.claude/skills/ | Claude Code |
.github/instructions/ | GitHub Copilot |
The injected files teach agents which token layer to read, how to map intent to semantic tokens, and when to prefer Foundation Styles over atomic token assembly.
8. theme-engine — preferred CLI alias (since 3.8.0)
npx theme-engine init
npx theme-engine ai:init
npx theme-engine build:all
theme-engine is now the preferred command name for consumer workspaces. The legacy aplica-theme-engine name is preserved as a compatibility fallback — existing scripts continue to work without changes.
All active documentation, onboarding flows, and consumer guides standardize on theme-engine first. The package name (@aplica/aplica-theme-engine) and config filenames (aplica-theme-engine.config.mjs) are unchanged.
7. AI UI Integration Program
A formal contract that specifies how AI agents consume the token system when generating UI:
- Preferred path: Foundation Styles (
typography.css,elevation.css) — one class maps to a complete style decision - Secondary path: Semantic tokens (
action.bg.brand.default) — when fine-grained control is needed - Never: Brand, Mode, or Surface layer tokens — those are engine internals
Seven component archetypes (Button, Dialog, Input, Badge, Select, Card, Tabs) define the canonical token decision model for each component type.
V3 milestone versions
Current version: 3.12.0 (2026-04-30)
- 3.12.0 — Enhanced interaction decomposition:
options.interaction.groups.{function|feedback}allowsfunctionandfeedbackto use different decomposition methods and surface configs independently within the same theme; per-group surface overrides resolve by merging theme → surface → group → group-surface - 3.11.0 —
theme-engine preview --serveadds live reload — the browser refreshes automatically whendist/changes; no manual reload needed while iterating on theme configs - 3.10.1 — Bug fix: grouped interaction decomposition overrides (
options.interaction.groups.*) now resolve correctly in all surface and state combinations - 3.10.0 — Native AI guidance distribution:
theme-engine ai:initnow deploys context files from the published package instead of local templates;AI_CONTEXT.mdandTHEME_CONFIG_REFERENCE.mdare packaged per release and updated automatically onai:initafter an upgrade - 3.9.0 — Authored interaction decomposition modes (
system-scale/dilution) forinterface.functionandinterface.feedback; expandedsolid/ghostsurface presets vialegacyStructure: false; per-state authored tuning underoptions.interaction.surfaces.{solid|ghost}.levels;theme-engine previewcommand generates static HTML preview indist/preview/ - 3.8.5 — Trusted publishing release automation via GitHub Actions; runtimes upgraded to Node.js 24
- 3.8.4 — Negative
*.txttokens now follow the declared canvas contract all the way todist/for interface, feedback, disabled, and product branches; newmode.productBySurfacebranch ensures product polarity survivessync:architecture;test:txt-inversionnow audits final distributable JSON indist/ - 3.8.3 — Ambient readable text now follows the final file canvas in both polarities:
brand.ambient.contrast.*,neutral.*, andgrayscale.*.txtresolve against the declaredcontrast.base.positive.background; negative ambient surfaces resolve from the inverse mode canvas - 3.8.2 —
brand.brandingnow respects positive/negative surface polarity in semantic outputs via a dedicatedmode.brand.brandingBySurfacebranch; dark mode follows the same inverse-surface rule as light mode - 3.8.1 — Ambient
txtaccessibility correction:brand.ambient.neutral.*.txtandbrand.ambient.grayscale.*.txtnow validate against the declaredcontrast.base.{positive|negative}.backgroundsurface instead of the level background; regression coverage extended intest:txt-inversion - 3.8.0 —
theme-enginepreferred CLI alias — shorter command for consumer workspaces;aplica-theme-enginepreserved as a compatibility fallback; all active docs standardize ontheme-enginefirst - 3.7.5 — Tokens Studio-safe fix: disabled product readable-text branches no longer emit invalid
txt: nullnodes whengenerateTxt: trueandtextExposure.product: false - 3.7.4 — Readable text inversion for negative surfaces:
brand.text.negative.*now resolves correctly; producttxtremoved from public layers when product readable text is disabled; legacy migrator infers feedback text exposure from flat aliases - 3.7.2 —
brand.brandingpropagation fixed throughmodebefore reachingsurfaceand semantic outputs; legacy migrator now preservesgeneration.colorTextcontract automatically - 3.7.1 — Ambient
txtinversion fix at theme layer:brand.ambientnow resolves readable text against the correct positive/negative background contexts - 3.7.0 —
jsonTypedoutput platform — first extensible output delivery with typed metadata (type,value,description,path); configurable viaformatOptions.jsonTypedintransformers.config.mjs; backward compatible, existingjsoncontract unchanged - 3.6.4 — Migration fix:
generate-foundation.mjsnow correctly preservestxt.base.itemsin workspaces with custom product text families (e.g., Brewer-style themes withtada,ze) - 3.6.3 —
includePrimitives: falsedefault ininitscaffold, CLI onboarding banner, smoke coverage forai:init - 3.6.1 —
generation.colorTextworkspace config (breaking config consolidation from per-theme to workspace) - 3.6.0 — Four-part color contract:
txttoken added alongsidebackground/txtOn/border;txtBaseColorLevel; text states (normal/action/active/focus) in all layers; breaking: text aliases no longer source fromsurface.* - 3.5.2 — AI UI Integration Program — archetypes, portal rule for headless UI (Base UI, Radix)
- 3.5.0 —
ai:initcommand — AI Skills Injection into consumer workspace - 3.4.0 —
figma:generatecommand — Tokens Studio scaffolding with stable SHA1 IDs - 3.0.0 — Package-first architecture, consumer workspace model, public config API,
initwizard,migrate:legacy-consumer
Reference Files
- npm package:
@aplica/aplica-theme-engine - Config API:
aplica.config.mjsin the consumer project - AI context:
docs/context/(injected byai:init) - Full changelog:
CHANGELOG.mdin the package repository - AI UI program documentation:
docs/context/ai-ui/in the consumer workspace afterai:init