Spaces:
Sleeping
Sleeping
File size: 2,595 Bytes
dc7ee79 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | /**
* src/utils/units.js
* Unit conversion helpers for CSS → Figma (always px).
* Since we use computed styles from Playwright, most values
* are already resolved to px by the browser. These helpers
* handle the remaining edge cases.
*/
/**
* Parse a CSS px string → number.
* e.g. "24px" → 24, "0" → 0
*/
export function parsePx(value) {
if (!value || value === 'none' || value === 'auto') return 0;
const n = parseFloat(value);
return isNaN(n) ? 0 : n;
}
/**
* Convert CSS letter-spacing (em) to px, given a font size.
* e.g. "0.12em", fontSize=13 → 1.56
*/
export function letterSpacingToPx(value, fontSize) {
if (!value || value === 'normal') return 0;
if (value.endsWith('em')) {
return parseFloat(value) * parsePx(fontSize);
}
return parsePx(value);
}
/**
* Convert CSS line-height to Figma format.
* Returns { value: number, unit: "PERCENT" | "PIXELS" | "AUTO" }
*/
export function lineHeightToFigma(value, fontSize) {
if (!value || value === 'normal') return { unit: 'AUTO' };
// Unitless (e.g. 1.8) → multiply by 100 for percent
const n = parseFloat(value);
if (!isNaN(n) && !value.includes('px') && !value.includes('%')) {
return { value: Math.round(n * 100), unit: 'PERCENT' };
}
if (value.endsWith('%')) {
return { value: parseFloat(value), unit: 'PERCENT' };
}
if (value.endsWith('px')) {
return { value: n, unit: 'PIXELS' };
}
return { unit: 'AUTO' };
}
/**
* Convert CSS font-weight number → Figma style name.
*/
export const WEIGHT_MAP = {
100: 'Thin',
200: 'ExtraLight',
300: 'Light',
400: 'Regular',
500: 'Medium',
600: 'SemiBold',
700: 'Bold',
800: 'ExtraBold',
900: 'Black',
};
/**
* Convert CSS text-align → Figma textAlignHorizontal.
*/
export const TEXT_ALIGN_MAP = {
left: 'LEFT',
center: 'CENTER',
right: 'RIGHT',
justify: 'JUSTIFIED',
};
/**
* Convert CSS text-transform → Figma textCase.
*/
export const TEXT_CASE_MAP = {
uppercase: 'UPPER',
lowercase: 'LOWER',
capitalize: 'TITLE',
none: 'ORIGINAL',
};
/**
* Convert CSS justify-content → Figma primaryAxisAlignItems.
*/
export const JUSTIFY_MAP = {
'flex-start': 'MIN',
'center': 'CENTER',
'flex-end': 'MAX',
'space-between': 'SPACE_BETWEEN',
};
/**
* Convert CSS align-items → Figma counterAxisAlignItems.
*/
export const ALIGN_MAP = {
'flex-start': 'MIN',
'center': 'CENTER',
'flex-end': 'MAX',
'stretch': 'STRETCH',
'baseline': 'BASELINE',
};
|