diff --git a/src/codegen.js b/src/codegen.js index f322ce5..bac8e06 100644 --- a/src/codegen.js +++ b/src/codegen.js @@ -65,12 +65,12 @@ export default class Codegen { const tokenName = this.formatTokenName(k, config.tokenCase); let tokenValue = v; + // Format token value object keys for Figma variable groups + // Eg. `typography.native/web` or `colors.light/dark` if ( typeof v === "object" && - (name === "colors" || name === "typography") + (name === "colors" || (name === "typography" && !("fontSize" in v))) ) { - // Format token value object keys for Figma variable groups - // Eg. `typography.native/web` or `colors.light/dark` tokenValue = Object.entries(v).reduce((acc, entry) => { const _tokenName = this.formatTokenName( entry[0], diff --git a/src/tokenizer.js b/src/tokenizer.js index cf09f43..99cece8 100644 --- a/src/tokenizer.js +++ b/src/tokenizer.js @@ -3,7 +3,7 @@ import fs from "fs"; import axios from "axios"; import log from "./log"; import { optimizeSvg } from "./svgo"; -import { rgbToHex, roundToDecimal } from "./utils"; +import { rgbToHex, roundToDecimal, toFixed } from "./utils"; export default class Tokenizer { constructor({ config, figmaAPI, onlyNew }) { @@ -72,7 +72,7 @@ export default class Tokenizer { let color = ""; if (typeof fill.opacity === "number") { - const alpha = parseFloat(fill.opacity.toFixed(2)); + const alpha = toFixed(fill.opacity, 2); color = `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`; // prettier-ignore } else { color = rgbToHex( @@ -127,10 +127,8 @@ export default class Tokenizer { fontWeight: textStyle.fontWeight, fontSize: textStyle.fontSize, textTransform: textStyle.textCase === "UPPER" ? "uppercase" : "none", - letterSpacing: textStyle.letterSpacing, - lineHeight: parseFloat( - (textStyle.lineHeightPx / textStyle.fontSize).toFixed(3) - ), + letterSpacing: toFixed(textStyle.letterSpacing, 2), + lineHeight: toFixed(textStyle.lineHeightPx / textStyle.fontSize, 3), }; if (style.group) { @@ -150,7 +148,7 @@ export default class Tokenizer { // SHADOWS ------------------------------------------------------------- function getShadow(shadow) { const { r, g, b, a } = shadow.color; - const alpha = parseFloat(a.toFixed(2)); + const alpha = toFixed(a, 2); const rgba = `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`; // prettier-ignore const hex = rgbToHex( Math.round(r * 255), diff --git a/src/utils.js b/src/utils.js index fb4e862..bacb3ce 100644 --- a/src/utils.js +++ b/src/utils.js @@ -19,6 +19,8 @@ export const rgbToHex = (r, g, b) => { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }; -export const roundToDecimal = (n) => Math.abs(Math.round(n * 10) / 10); +export const roundToDecimal = (num) => Math.abs(Math.round(num * 10) / 10); + +export const toFixed = (num, dec) => parseFloat(num.toFixed(dec)); export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));