2024-06-25 07:12:37 -05:00
|
|
|
import { translateFill } from '@plugin/translators/fills/translateFills';
|
|
|
|
|
|
|
|
import { FillStyle } from '@ui/lib/types/utils/fill';
|
|
|
|
|
2024-06-28 01:32:56 -05:00
|
|
|
import { translateStyleName, translateStylePath } from '.';
|
|
|
|
|
2024-06-25 09:08:59 -05:00
|
|
|
export const translatePaintStyle = (figmaStyle: PaintStyle): FillStyle => {
|
2024-06-25 07:12:37 -05:00
|
|
|
const fillStyle: FillStyle = {
|
|
|
|
name: figmaStyle.name,
|
|
|
|
fills: [],
|
|
|
|
colors: []
|
|
|
|
};
|
|
|
|
|
|
|
|
const colorName = (figmaStyle: PaintStyle, index: number): string => {
|
2024-06-28 01:32:56 -05:00
|
|
|
return figmaStyle.paints.length > 1 ? `Color ${index + 1}` : translateStyleName(figmaStyle);
|
2024-06-25 07:12:37 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
let index = 0;
|
2024-06-28 01:32:56 -05:00
|
|
|
const path = translatePaintStylePath(figmaStyle);
|
2024-06-25 07:12:37 -05:00
|
|
|
|
|
|
|
for (const fill of figmaStyle.paints) {
|
|
|
|
const penpotFill = translateFill(fill);
|
|
|
|
|
|
|
|
if (penpotFill) {
|
|
|
|
fillStyle.fills.unshift(penpotFill);
|
|
|
|
fillStyle.colors.unshift({
|
|
|
|
path,
|
|
|
|
name: colorName(figmaStyle, index)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
index++;
|
|
|
|
}
|
|
|
|
|
|
|
|
return fillStyle;
|
|
|
|
};
|
2024-06-28 01:32:56 -05:00
|
|
|
|
|
|
|
const translatePaintStylePath = (figmaStyle: PaintStyle) => {
|
|
|
|
const path = translateStylePath(figmaStyle);
|
|
|
|
|
|
|
|
if (figmaStyle.paints.length <= 1) {
|
|
|
|
return path;
|
|
|
|
}
|
|
|
|
|
|
|
|
return path + (path !== '' ? ' / ' : '') + translateStyleName(figmaStyle);
|
|
|
|
};
|