From 5f240ffab1f823cbd6360068522c91ce1c707a41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Wed, 16 Jun 2021 14:56:08 +0200 Subject: [PATCH] refactor: colors --- packages/p2/code.js | 33 ++++++++++++++----------------- packages/p2/code.ts | 47 +++++++++++++++------------------------------ 2 files changed, 29 insertions(+), 51 deletions(-) diff --git a/packages/p2/code.js b/packages/p2/code.js index 7dfbecf..6456b5e 100644 --- a/packages/p2/code.js +++ b/packages/p2/code.js @@ -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); @@ -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); @@ -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]; @@ -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); @@ -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); } diff --git a/packages/p2/code.ts b/packages/p2/code.ts index d9e025e..2a65cfd 100644 --- a/packages/p2/code.ts +++ b/packages/p2/code.ts @@ -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) @@ -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) @@ -256,22 +245,19 @@ 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 } @@ -279,7 +265,7 @@ const createInstanceOfComponent = ( 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 = [] @@ -292,15 +278,16 @@ const createPallete = async (el: SceneNode, index: number) => { const palette: Array = 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() @@ -308,9 +295,7 @@ const createPallete = async (el: SceneNode, index: number) => { componentFinded ?? (await createComponent({ title: `${el.name} - ${colorNumber}`, - colorInRgb: hslToRgb({ ...palette[0] }), - colorInHex: hslToHex(palette[0]), - offsetTop: 0, + color: palette[0], })) if (!componentFinded) { @@ -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)