Skip to content

Commit

Permalink
refactor: colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@bart-krakowski
bart-krakowski committed Jun 16, 2021
1 parent fafaa6b commit 5f240ff
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 51 deletions.
33 changes: 14 additions & 19 deletions packages/p2/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ const createLineElement = () => {
};
const createContentInnerFrame = () => {
const contentInnerFrame = figma.createFrame();
contentInnerFrame.name = 'Content inner';
contentInnerFrame.name = 'Content';
contentInnerFrame.x = 552;
contentInnerFrame.y = 32;
contentInnerFrame.resizeWithoutConstraints(664, 64);
Expand All @@ -200,19 +200,18 @@ const createElementComponent = () => {
elementComponent.resizeWithoutConstraints(1216, 128);
return elementComponent;
};
const createComponent = ({ title, colorInRgb, colorInHex, offsetTop, }) => __awaiter(this, void 0, void 0, function* () {
const createComponent = ({ title, color }) => __awaiter(this, void 0, void 0, function* () {
const elementComponent = createElementComponent();
elementComponent.y = offsetTop;
const contentFrame = createContentFrame();
const contentInnerFrame = createContentInnerFrame();
const descriptionText = createDescriptionText({ text: 'Short information about usage.' });
const titleFrame = createTitleFrame();
const badgeText = createColorBadge({
text: colorInHex,
text: hslToHex(color),
color: { r: 0.9294117647, g: 0.9294117647, b: 0.9843137255 },
});
const titleText = createTitleText({ text: title });
const colorFrame = createColorFrame({ color: colorInRgb });
const colorFrame = createColorFrame({ color: hslToRgb(Object.assign({}, color)) });
const lineElement = createLineElement();
titleFrame.appendChild(badgeText);
titleFrame.appendChild(titleText);
Expand All @@ -225,22 +224,21 @@ const createComponent = ({ title, colorInRgb, colorInHex, offsetTop, }) => __awa
return elementComponent;
});
const createInstanceOfComponent = (mainComponent, options) => {
const { title, colorInRgb, colorInHex, offsetTop } = options;
const { title, color } = options;
const elementComponent = mainComponent.createInstance();
elementComponent.y = offsetTop;
const titleElement = elementComponent.findOne((n) => n.type === 'TEXT' && n.name === 'Title');
const colorElement = elementComponent.findOne((n) => n.type === 'FRAME' && n.name === 'Color');
const badgeElement = elementComponent.findOne((n) => n.type === 'TEXT' && n.name === 'Badge');
colorElement.fills = [{ type: 'SOLID', color: colorInRgb }];
colorElement.fills = [{ type: 'SOLID', color: hslToRgb(Object.assign({}, color)) }];
titleElement.deleteCharacters(0, titleElement.characters.length);
titleElement.insertCharacters(0, title);
badgeElement.deleteCharacters(0, badgeElement.characters.length);
badgeElement.insertCharacters(0, colorInHex);
badgeElement.insertCharacters(0, hslToHex(color));
return elementComponent;
};
const getColorNumber = (length, index) => (length + 1) * 100 - (index + 1) * 100;
const findTileComponent = () => {
return figma.currentPage.findOne((n) => n.type === 'COMPONENT');
return figma.currentPage.findOne((n) => n.type === 'COMPONENT' && n.name === 'DS_Color_Tile');
};
const containers = [];
const range = [-4, 5];
Expand All @@ -252,20 +250,19 @@ const createPallete = (el, index) => __awaiter(this, void 0, void 0, function* (
const palette = colorLuminance({ h, s, l }, range);
containers.push(figma.createFrame());
containers[index].name = el.name;
containers[index].layoutMode = 'VERTICAL';
containers[index].resizeWithoutConstraints(1216, 128 * palette.length);
const indexOfFrame = figma.currentPage.selection.indexOf(el);
containers[index].x = 1216 * indexOfFrame + 35 * indexOfFrame;
const colorInRgb = hslToRgb(Object.assign({}, palette[0]));
const style = figma.createPaintStyle();
const colorStyle = figma.createPaintStyle();
const colorNumber = getColorNumber(palette.length, palette.indexOf(palette[0]));
style.name = `${el.name} / ${el.name} ${colorNumber}`;
style.paints = [{ type: 'SOLID', color: colorInRgb }];
colorStyle.name = `${el.name} / ${el.name} — ${colorNumber}`;
colorStyle.paints = [{ type: 'SOLID', color: colorInRgb }];
const componentFinded = findTileComponent();
const mainComponent = componentFinded !== null && componentFinded !== void 0 ? componentFinded : (yield createComponent({
title: `${el.name} - ${colorNumber}`,
colorInRgb: hslToRgb(Object.assign({}, palette[0])),
colorInHex: hslToHex(palette[0]),
offsetTop: 0,
color: palette[0],
}));
if (!componentFinded) {
containers[index].appendChild(mainComponent);
Expand All @@ -281,9 +278,7 @@ const createPallete = (el, index) => __awaiter(this, void 0, void 0, function* (
style.paints = [{ type: 'SOLID', color: colorInRgb }];
const item = createInstanceOfComponent(mainComponent, {
title: `${el.name} - ${colorNumber}`,
colorInRgb: hslToRgb(Object.assign({}, color)),
colorInHex: hslToHex(color),
offsetTop: palette.indexOf(color) * 128,
color,
});
containers[index].appendChild(item);
}
Expand Down
47 changes: 15 additions & 32 deletions packages/p2/code.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ const createLineElement = () => {

const createContentInnerFrame = () => {
const contentInnerFrame = figma.createFrame()
contentInnerFrame.name = 'Content inner'
contentInnerFrame.name = 'Content'
contentInnerFrame.x = 552
contentInnerFrame.y = 32
contentInnerFrame.resizeWithoutConstraints(664, 64)
Expand Down Expand Up @@ -212,29 +212,18 @@ const createElementComponent = () => {
return elementComponent
}

const createComponent = async ({
title,
colorInRgb,
colorInHex,
offsetTop,
}: {
title: string
colorInRgb: RGB
colorInHex: string
offsetTop: number
}) => {
const createComponent = async ({ title, color }: { title: string; color: HSL }) => {
const elementComponent = createElementComponent()
elementComponent.y = offsetTop
const contentFrame = createContentFrame()
const contentInnerFrame = createContentInnerFrame()
const descriptionText = createDescriptionText({ text: 'Short information about usage.' })
const titleFrame = createTitleFrame()
const badgeText = createColorBadge({
text: colorInHex,
text: hslToHex(color),
color: { r: 0.9294117647, g: 0.9294117647, b: 0.9843137255 },
})
const titleText = createTitleText({ text: title })
const colorFrame = createColorFrame({ color: colorInRgb })
const colorFrame = createColorFrame({ color: hslToRgb({ ...color }) })
const lineElement = createLineElement()

titleFrame.appendChild(badgeText)
Expand All @@ -256,30 +245,27 @@ const createInstanceOfComponent = (
mainComponent: ComponentNode,
options: {
title: string
colorInRgb: RGB
colorInHex: string
offsetTop: number
color: HSL
}
) => {
const { title, colorInRgb, colorInHex, offsetTop } = options
const { title, color } = options
const elementComponent = mainComponent.createInstance()
elementComponent.y = offsetTop
const titleElement = elementComponent.findOne((n) => n.type === 'TEXT' && n.name === 'Title') as TextNode
const colorElement = elementComponent.findOne((n) => n.type === 'FRAME' && n.name === 'Color') as FrameNode
const badgeElement = elementComponent.findOne((n) => n.type === 'TEXT' && n.name === 'Badge') as TextNode
colorElement.fills = [{ type: 'SOLID', color: colorInRgb }]
colorElement.fills = [{ type: 'SOLID', color: hslToRgb({ ...color }) }]
titleElement.deleteCharacters(0, titleElement.characters.length)
titleElement.insertCharacters(0, title)
badgeElement.deleteCharacters(0, badgeElement.characters.length)
badgeElement.insertCharacters(0, colorInHex)
badgeElement.insertCharacters(0, hslToHex(color))

return elementComponent
}

const getColorNumber = (length: number, index: number) => (length + 1) * 100 - (index + 1) * 100

const findTileComponent = () => {
return figma.currentPage.findOne((n) => n.type === 'COMPONENT') as ComponentNode
return figma.currentPage.findOne((n) => n.type === 'COMPONENT' && n.name === 'DS_Color_Tile') as ComponentNode
}

const containers: Array<FrameNode> = []
Expand All @@ -292,25 +278,24 @@ const createPallete = async (el: SceneNode, index: number) => {
const palette: Array<HSL> = colorLuminance({ h, s, l }, range)
containers.push(figma.createFrame())
containers[index].name = el.name
containers[index].layoutMode = 'VERTICAL'
containers[index].resizeWithoutConstraints(1216, 128 * palette.length)
const indexOfFrame = figma.currentPage.selection.indexOf(el)
containers[index].x = 1216 * indexOfFrame + 35 * indexOfFrame

const colorInRgb = hslToRgb({ ...palette[0] })
const style = figma.createPaintStyle()
const colorStyle = figma.createPaintStyle()
const colorNumber = getColorNumber(palette.length, palette.indexOf(palette[0]))
style.name = `${el.name} / ${el.name} ${colorNumber}`
style.paints = [{ type: 'SOLID', color: colorInRgb }]
colorStyle.name = `${el.name} / ${el.name} — ${colorNumber}`
colorStyle.paints = [{ type: 'SOLID', color: colorInRgb }]

const componentFinded = findTileComponent()

const mainComponent =
componentFinded ??
(await createComponent({
title: `${el.name} - ${colorNumber}`,
colorInRgb: hslToRgb({ ...palette[0] }),
colorInHex: hslToHex(palette[0]),
offsetTop: 0,
color: palette[0],
}))

if (!componentFinded) {
Expand All @@ -327,9 +312,7 @@ const createPallete = async (el: SceneNode, index: number) => {

const item = createInstanceOfComponent(mainComponent, {
title: `${el.name} - ${colorNumber}`,
colorInRgb: hslToRgb({ ...color }),
colorInHex: hslToHex(color),
offsetTop: palette.indexOf(color) * 128,
color,
})

containers[index].appendChild(item)
Expand Down

0 comments on commit 5f240ff

Please sign in to comment.