Documentation

Documentation

Migrate from LightLeap

Move existing LightLeap UI and tokens consumers to DS-GN.

LightLeap is now DS-GN. The product uses ds-gn.com and the DS/GN wordmark; the legal company remains LightLeap Labs LLC.

The new public packages replace @lightleaplabs/ui and @lightleaplabs/tokens. Migrating requires updating package names and branded APIs together. Existing published LightLeap versions remain unchanged and installable. The new packages do not register compatibility aliases for the old APIs.

1. Replace package dependencies and imports

Remove @lightleaplabs/ui and @lightleaplabs/tokens from your dependencies, then install their replacements with your package manager:

npm install @ds-gn/ui @ds-gn/tokens
# or: pnpm add @ds-gn/ui @ds-gn/tokens
# or: bun add @ds-gn/ui @ds-gn/tokens

Regenerate and commit your lockfile. Keep the existing peer dependencies; see Installation.

Replace the package scope in every component, React, token stylesheet, and JavaScript/TypeScript import. Subpaths keep their names:

// Before
import '@lightleaplabs/ui/button';
import { Input } from '@lightleaplabs/ui/react';

// After
import '@ds-gn/ui/button';
import { Input } from '@ds-gn/ui/react';
/* Before */
@import '@lightleaplabs/tokens/public';
@import '@lightleaplabs/tokens/theme';
@import '@lightleaplabs/tokens/properties';

/* After */
@import '@ds-gn/tokens/public';
@import '@ds-gn/tokens/theme';
@import '@ds-gn/tokens/properties';

Load all three token stylesheets from the new package. Avoid mixing LightLeap and DS-GN stylesheets or component imports during the migration.

2. Rename custom elements and selectors

Replace lll- with dsgn- in component tags, DOM queries, CSS selectors, templates, tests, and handwritten JSX/type declarations:

<!-- Before -->
<lll-button appearance="solid">Save</lll-button>

<!-- After -->
<dsgn-button appearance="solid">Save</dsgn-button>

The tokens package contains no custom elements. Component attributes, properties, slots, methods, and behavior retain their existing names.

3. Rename custom events and React handlers

Custom event names change from lll-* to dsgn-*; native DOM events such as click keep their names:

// Before
document.querySelector('lll-input').addEventListener('lll-input', handleInput);

// After
document
  .querySelector('dsgn-input')
  .addEventListener('dsgn-input', handleInput);

React wrapper component names stay the same. Rename branded event props from onLll* to onDsgn*:

// Before
<Input onLllInput={handleInput} />

// After
<Input onDsgnInput={handleInput} />

For example, onLllModalRequestClose becomes onDsgnModalRequestClose.

4. Update branded CSS variables

Replace --lll-* references with --dsgn-*, including --lll-border-sweep-angle → --dsgn-border-sweep-angle. The internal --lll-src-* mirrors become --dsgn-src-*; these are implementation details, not supported override targets.

Generic token names such as --color-*, token values, and theme behavior remain unchanged. Keep your existing public token overrides.

5. Verify the migrated application

  • Search active source and configuration for @lightleaplabs/, lll-, onLll, and --lll-. Review matches in selectors, handlers, and styles.
  • Rebuild the application and run its type checks and tests.
  • Verify component registration, keyboard interaction, custom events, React handlers, light/dark themes, and any server rendering or hydration.
  • Check your production dependency graph and committed lockfile use the new packages consistently.

These instructions cover the public UI and tokens packages. For generated customer design systems, retain explicitly configured custom element prefixes and customer-owned package scopes; the new generator default is dsgn-.

The package changelog records published versions and migration notes. Package deprecation notices direct existing LightLeap consumers here after the replacement packages and production documentation pass acceptance.

Esc