@sinchsmb/mktheme/src/utils/toHiveTheme.js

Util that allow to make frontend theme from Figma theme export file

const _ = require('lodash');

/**
 * Gets css props for typography
 * @param {Object} value Figma typography token
 * @return {Object}
 */
function getTypographyMixin(value) {
  return _(value)
    .omitBy((val) => ['', '0'].includes(val))
    .mapKeys((val, key) => _.kebabCase(key))
    .mapValues((val, key) => {
      switch (key) {
        case 'font-weight':
        case 'font-family':
          return val;
        case 'line-height':
        case 'font-size':
          return val + 'px';
        default:
          throw new Error(`Can't resolve ${key} with value ${val}`);
      }
    })
    .map((val, key) => {
      return `${key}: ${val}`;
    })
    .join('; ');
}

/**
 * Convert Figma Theme to SinchSMB UI Kit theme
 * @param {object} theme Figma Theme
 * @return {Object} SinchSMB UI Kit theme
 */
function toHiveTheme(theme) {
  return _.cloneDeepWith(theme, function (token) {
    if (!token?.type) {
      return;
    }
    switch (token.type) {
      case 'color':
      case 'other':
      case 'fontFamilies':
        return token.value;
      case 'borderRadius':
        return token.value + 'px';
      case 'boxShadow':
        const { x, y, blur, spread, color, type } = token.value;
        return `${type === 'innerShadow' ? 'inset ' : ''}${x}px ${y}px ${blur}px ${spread}px ${color}`;
      case 'typography':
        return getTypographyMixin(token.value);
      default:
        throw new Error(`Found unknown type ${token.type}`);
    }
  });
}

module.exports = { toHiveTheme };