From f072e4808ff35b1b9f030af86337bacd7694d257 Mon Sep 17 00:00:00 2001 From: Mayank fulera Date: Thu, 16 Nov 2023 09:50:46 +0530 Subject: [PATCH] FLOW-963 code complexity fix --- packages/flow-core/figma/sync-colors.js | 225 +++++++++++------- .../f-text/_f-text-variables-dynamic.scss | 1 + .../src/mixins/scss/_text-tokens.scss | 5 + 3 files changed, 140 insertions(+), 91 deletions(-) diff --git a/packages/flow-core/figma/sync-colors.js b/packages/flow-core/figma/sync-colors.js index 83819d0a3..9e7cd728a 100644 --- a/packages/flow-core/figma/sync-colors.js +++ b/packages/flow-core/figma/sync-colors.js @@ -77,6 +77,10 @@ function generateTokenScss(colorTokens) { } } +/** + * This will generate /src/shared/_text-tokens.scss file and it is consumed in `f-root.scss and one more file to consume this tokens dynamically i.e f-text-variables-dynamic.scss` + * @param {*} textTokens Json object of variants, weights and size for text. + */ function generateTextScss(textTokens) { const tokenTextFileName = `${__dirname}/../src/components/f-text/_f-text-variables-dynamic.scss`; const scssFile = `${__dirname}/../src/mixins/scss/_text-tokens.scss`; @@ -119,69 +123,34 @@ function generateTextScss(textTokens) { } } +/** + * This will generate /src/shared/_text-tokens.scss file and it is consumed in `f-root.scss and one more file to consume this tokens dynamically i.e f-text-variables-dynamic.scss` + * @param {*} textStyle Json object from API consisting of text type and styling. + * @param {*} variants Json object prepared to store all the types styling of varinats present - para, heading, code + * @param {*} weights Json object prepared to store all the types of weights present -medium, regular, bold + * @param {*} fontFamily Json object to store fontfamily for code and general texts. + */ function generateTextTokens(textStyle, variants, weights, fontFamily) { - const text = textStyle.name.split("/"); - const name = text[0]; - const size = text[1]; - const weight = text[2]; + const [name, size, weight] = textStyle.name.split("/"); const styling = textStyle.style; - if (!(name in variants)) { - variants[name] = {}; - } - if (!(size in variants[name])) { - variants[name][size] = { fontSize: styling.fontSize, lineHeight: styling.lineHeightPx }; - } - - if (!(weight in weights)) { - weights[weight] = styling.fontWeight; - } - - if (!("general" in fontFamily)) { - if (name !== "code") { - fontFamily.general = styling.fontFamily; - } - } - if (!("code" in fontFamily)) { - if (name === "code") { - fontFamily.code = styling.fontFamily; - } - } -} - -function createVariablesSCSS(data) { - let scssContent = `\n$variants: (\n`; - - Object.keys(data.variants).forEach(category => { - scssContent += `\t"${category}": (\n`; - - Object.keys(data.variants[category]).forEach(size => { - scssContent += `\n\t\t"${size}": (\n`; - scssContent += `\t\t\t"fontSize": var(${fontTokenString(category, size)}),\n`; - scssContent += `\t\t\t"lineHeight": var(${lineHeightTokenString(category, size)})\n`; - scssContent += `\t\t),\n`; - }); - - scssContent += `\t),\n`; - }); - - scssContent += `);`; + // Initialize variants[name] if not exists + variants[name] = variants[name] || {}; - scssContent += `\n$weights: (\n`; + // Set fontSize and lineHeight for the given size + variants[name][size] = { fontSize: styling.fontSize, lineHeight: styling.lineHeightPx }; - Object.keys(data.weights).forEach((key, index, array) => { - scssContent += `\t"${key}": var(${weightTokenString(key)})`; - - if (index !== array.length - 1) { - scssContent += ","; - } + // Set fontWeight if not exists + weights[weight] = weights[weight] || styling.fontWeight; - scssContent += "\n"; - }); - - scssContent += `);\n`; + // Set fontFamily for general and code categories + if (!fontFamily.general && name !== "code") { + fontFamily.general = styling.fontFamily; + } - return scssContent; + if (!fontFamily.code && name === "code") { + fontFamily.code = styling.fontFamily; + } } function fontTokenString(category, size) { @@ -196,38 +165,118 @@ function weightTokenString(key) { return `--text-${key}-weight`; } +/** + * + * @param {*} data Json object of variants, weights and size for text + * @returns scss string formed for creating text-variable file + */ +function createVariablesSCSS(data) { + const scssContent = Object.keys(data.variants) + .map(category => { + const categoryContent = Object.keys(data.variants[category]) + .map(size => { + const fontSizeToken = fontTokenString(category, size); + const lineHeightToken = lineHeightTokenString(category, size); + + return ( + `\t\t"${size}": (\n` + + `\t\t\t"fontSize": var(${fontSizeToken}),\n` + + `\t\t\t"lineHeight": var(${lineHeightToken})\n` + + `\t\t),\n` + ); + }) + .join(""); + + return `\t"${category}": (\n${categoryContent}\t),\n`; + }) + .join(""); + + const weightsContent = Object.keys(data.weights) + .map( + (key, index, array) => + `\t"${key}": var(${weightTokenString(key)})${index !== array.length - 1 ? "," : ""}\n` + ) + .join(""); + + return `\n$variants: (\n${scssContent});\n\n$weights: (\n${weightsContent});\n`; +} + +/** + * + * @param {*} data Json object of variants, weights and size for text + * @param {*} theme theme for ollion or general flow-core, as we need top create separate tokens with separate values for both diffeent themes. + * @returns + */ function createTokenSCSS(data, theme) { - let scssContent = + const themeSelector = theme === THEME_OLLION - ? `[data-theme="f-ollion-dark"], [data-theme="f-ollion-light"] {\n` - : `[data-theme="f-dark"], [data-theme="f-light"] {\n`; - - Object.keys(data.variants).forEach(category => { - Object.keys(data.variants[category]).forEach(size => { - const { fontSize, lineHeight } = data.variants[category][size]; - scssContent += `${fontTokenString(category, size)} : ${fontSize}px;\t\n`; - scssContent += `${lineHeightTokenString(category, size)} : ${Math.round(lineHeight)}px;\t\n`; - }); - }); + ? `[data-theme="f-ollion-dark"], [data-theme="f-ollion-light"]` + : `[data-theme="f-dark"], [data-theme="f-light"]`; + + const fontStyles = { + general: + theme === THEME_OLLION ? `"${data.fontFamily.general}", serif` : `"Montserrat", sans-serif`, + code: + theme === THEME_OLLION ? `"${data.fontFamily.code}", monospace` : `"Courier Prime", monospace` + }; + + const scssContent = ` + ${themeSelector} { + ${generateCategoryStyles(data.variants)} + ${generateWeightStyles(data.weights)} + --flow-font: ${fontStyles.general}; + --flow-code-font: ${fontStyles.code}; + }\n`; - Object.keys(data.weights).forEach(key => { - scssContent += `${weightTokenString(key)} : ${data.weights[key]};\t\n`; - }); + return scssContent; +} - scssContent += `--flow-font : ${ - theme === THEME_OLLION ? `"${data.fontFamily.general}", serif` : `"Montserrat", sans-serif` - };\t\n`; - scssContent += `--flow-code-font : ${ - theme === THEME_OLLION ? `"${data.fontFamily.code}", monospace` : `"Courier Prime", monospace` - };\t\n`; +/** + * + * @param {*} variants json object for variants of text and their font-sizes + * @returns stringified scss tokens for texts + */ +function generateCategoryStyles(variants) { + return Object.keys(variants) + .map(category => generateSizeStyles(category, variants[category])) + .join(""); +} - scssContent += `\n}\n`; +/** + * + * @param {*} category category includes - para, code, heading + * @param {*} sizes sizes values are different for every category + * @returns stringified scss tokens for text variants + */ +function generateSizeStyles(category, sizes) { + return Object.keys(sizes) + .map(size => { + const { fontSize, lineHeight } = sizes[size]; + return `${fontTokenString(category, size)}: ${fontSize}px;\t\n${lineHeightTokenString( + category, + size + )}: ${Math.round(lineHeight)}px;\t\n`; + }) + .join(""); +} - return scssContent; +/** + * + * @param {*} weights weights json holds - bold, medium, regular + * @returns stringified scss tokens for text weights + */ +function generateWeightStyles(weights) { + return Object.keys(weights) + .map(key => `${weightTokenString(key)}: ${weights[key]};\t\n`) + .join(""); } /** - * Get document of specified file Id + * + * @param {*} theme theme present is for ollion of general-flow-core + * @param {*} nodeIds list of nodeids + * @param {*} colorTokens Json object of theme and color variables + * @param {*} textTokens Json object of variants, weights and size for text. */ async function processStyles(theme, nodeIds, colorTokens, textTokens) { try { @@ -256,18 +305,9 @@ async function processStyles(theme, nodeIds, colorTokens, textTokens) { } } } - if (theme === THEME_OLLION) { - if (!(THEME_OLLION in textTokens)) { - textTokens[THEME_OLLION] = { variants: variants, weights: weights, fontFamily: fontFamily }; - } - } else { - if (!(THEME_FLOW_GEN in textTokens)) { - textTokens[THEME_FLOW_GEN] = { - variants: variants, - weights: weights, - fontFamily: fontFamily - }; - } + const textTheme = theme === THEME_OLLION ? THEME_OLLION : THEME_FLOW_GEN; + if (!(textTheme in textTokens)) { + textTokens[textTheme] = { variants, weights, fontFamily }; } } catch (error) { console.error(`Error processing styles for ${theme}:`, error); @@ -275,6 +315,9 @@ async function processStyles(theme, nodeIds, colorTokens, textTokens) { } } +/** + * Get document of specified file Id + */ async function generateStyles() { const colorTokens = {}; const textTokens = {}; diff --git a/packages/flow-core/src/components/f-text/_f-text-variables-dynamic.scss b/packages/flow-core/src/components/f-text/_f-text-variables-dynamic.scss index 5e0f1e04d..eefa24614 100644 --- a/packages/flow-core/src/components/f-text/_f-text-variables-dynamic.scss +++ b/packages/flow-core/src/components/f-text/_f-text-variables-dynamic.scss @@ -58,6 +58,7 @@ $variants: ( ) ) ); + $weights: ( "medium": var(--text-medium-weight), "regular": var(--text-regular-weight), diff --git a/packages/flow-core/src/mixins/scss/_text-tokens.scss b/packages/flow-core/src/mixins/scss/_text-tokens.scss index 065b8b403..442ea3a0a 100644 --- a/packages/flow-core/src/mixins/scss/_text-tokens.scss +++ b/packages/flow-core/src/mixins/scss/_text-tokens.scss @@ -26,12 +26,15 @@ --text-code-large-lineheight: 26px; --text-code-medium-font: 14px; --text-code-medium-lineheight: 22px; + --text-medium-weight: 350; --text-regular-weight: 325; --text-bold-weight: 400; + --flow-font: "Montserrat", sans-serif; --flow-code-font: "Courier Prime", monospace; } + [data-theme="f-ollion-dark"], [data-theme="f-ollion-light"] { --text-heading-x-large-font: 72px; @@ -60,9 +63,11 @@ --text-code-large-lineheight: 34px; --text-code-x-small-font: 12px; --text-code-x-small-lineheight: 17px; + --text-medium-weight: 500; --text-bold-weight: 600; --text-regular-weight: 400; + --flow-font: "Rhymes Display", serif; --flow-code-font: "Operator Mono", monospace; }