Spacing Resolution

TailTrace matches spacing values (padding, margin, gap, width, height) to your design system tokens.

How It Works

1. Parse the value - Extract numeric value and unit
2. Normalize to pixels - Convert rem/em to px
3. Find closest token - Within threshold

import { SpacingResolver } from '@tailtrace/core';

const resolver = new SpacingResolver({
  spacing: {
    '1': '4px',
    '2': '8px',
    '4': '16px',
    '6': '24px',
  },
  threshold: 2, // max px difference for fuzzy match
});

resolver.resolve('15px');
// { token: '4', confidence: 'fuzzy', deviation: 1 }

resolver.resolve('16px');
// { token: '4', confidence: 'exact' }

Supported Units

Unit	Conversion
px	Direct
rem	× 16 (default root)
em	× 16 (assumes 16px base)

Threshold

The spacingThreshold config option sets the maximum pixel difference for a fuzzy match:

{
  "spacingThreshold": 2
}

• 15px with threshold 2 → matches 16px (1px off)
• 13px with threshold 2 → no match (3px off)

Border Radius

Works the same way for border-radius:

import { BorderRadiusResolver } from '@tailtrace/core';

const resolver = new BorderRadiusResolver({
  borderRadius: {
    'sm': '4px',
    'md': '8px',
    'lg': '12px',
    'full': '9999px',
  },
});