code: function toProperties(variables) {
    const categories = Object.keys(variables);
    const valueOf = (category, value) => {
      let retVal;
  
      if (category === 'color') {
        retVal = `rgb(${value.r}, ${value.g}, ${value.b})`;
      } else if (category === 'font-family') {
        retVal = value
          .map(font => {
            return font.indexOf(' ') === -1 ? font : `'${font}'`;
          })
          .join(', ');
      } else {
        retVal = value;
      }
  
      return retVal;
    };
  
    return categories.reduce((retVal, category) => {
      const keys = Object.keys(variables[category]);
  
      keys.forEach(key => {
        const value = valueOf(category, variables[category][key]);
        const _key = key.length > 0 ? `${category}-${key}` : `${category}`;
  
        retVal.push(`--zd-${_key}: ${value};`);
      });
  
      return retVal;
    }, []);
  }
docs: Convert the given variables object to an array of CSS properties.
  
  @param {Object} variables The object to convert.
  
  @returns {Array} CSS properties.