@the_awkward_customer/tokens-resolver

Runtime token resolution engine for component tokens with multi-dimensional theming.

Overview

This package provides runtime resolution of component tokens based on dynamic modes (sentiment, emphasis, state, density, theme). It consumes the component manifest and resolves alias chains to concrete CSS values.

Installation

npm install @the_awkward_customer/tokens-resolver

Usage

Basic Resolution

import { TokenResolver } from '@the_awkward_customer/tokens-resolver';

const resolver = new TokenResolver();

// Resolve a component token
const backgroundColor = resolver.resolve('Button', 'background', {
  sentiment: 'danger',
  emphasis: 'high',
  state: 'hover'
});

Angular Integration

import { TokenResolverService } from '@the_awkward_customer/tokens-resolver/angular';

@Component({
  selector: 'my-component',
  template: '...'
})
export class MyComponent {
  constructor(private tokenResolver: TokenResolverService) {}

  get styles() {
    return {
      '--bg': this.tokenResolver.resolve('Button', 'background', { ... })
    };
  }
}

Utility Hooks

import { createTokenHook } from '@the_awkward_customer/tokens-resolver/utils';

const useButtonTokens = createTokenHook('Button', ['background', 'color', 'border']);

const tokens = useButtonTokens({ sentiment: 'danger', state: 'hover' });
// { background: '#dc2626', color: '#ffffff', border: '#dc2626' }

Features

• Runtime Resolution: Dynamically resolve tokens based on component modes
• Alias Chain Resolution: Follow alias references to concrete values
• Mode Fallbacks: Intelligent fallback when exact mode combination not found
• Caching: Performance-optimized with built-in caching
• Theme Detection: Automatic system theme detection
• TypeScript: Full type safety with generated types

License

MIT