Add support for multiple styles within a single Figma TextNode

[spikelu2016]

Is your feature request related to a problem? Please describe.
Currently, Bricks can only support a uniform styling of text within a TextNode. However in Figma, you can apply different styles to different sections of the TextNodes. Therefore, we should add support for having multiple styles within a single Figma TextNode

Styles to support:

• CSS:
  • fontSize
  • fontName
  • fontWeight
  • textDecoration
  • textCase
  • lineHeight
  • letterSpacing
  • fills
  • textStyleId
  • fillStyleId
  • listOptions
  • indentation
  • hyperlink
• Tailwind CSS
  • fontSize
  • fontName
  • fontWeight
  • textDecoration
  • textCase
  • lineHeight
  • letterSpacing
  • fills
  • textStyleId
  • fillStyleId
  • listOptions
  • indentation
  • hyperlink

Default styles map

If there are multiple text styles within a text node, here are the default styles to use for the outermost <div>:

• fontSize: font-size: <the font size with the longest length>;
• fontName: font-family: <the font with the longest length>;
• fontWeight: font-weight: "normal"; (i.e. Regular font)
• textDecoration: font-style: "normal";
• textCase: text-transform: "none";
• lineHeight: line-height: normal;
• letterSpacing: letter-spacing: normal;
• fills: most common blended solid color
• textStyleId: ?
• fillStyleId: ?
• listOptions: ?
• indentation: ?
• hyperlink: ?

Inside the <div>, for each different segment of text style, we wrap it in a <span> with the overriding styles.

Todos

1. Modify getCssAttributes() in core/src/design/adapter/figma/adapter.ts so that it generates default styles if style === figma.mixed. For example:

// font size
if (figmaNode.fontSize !== figma.mixed) {
  attributes["font-size"] = `${figmaNode.fontSize}px`;
} else {
  // add default font size here according to the default styles map above
}

2. Modify getTextProp() in core/src/code/generator/html/generator.ts so that we generate nested <span>s for each overriding style.

[donfour]

Update: will pause on mixed line heights for now

The behavior of mixed line height between web and Figma are different. For example, if we have a text with three lines of text:

line 1 <-- line height = auto
line 2 <-- line height = 200%
line 3 <-- line height = auto

It will look like this in Figma, where the extra space is put above the text:

And it will look like this in web, where the extra space is distributed equally above and below the text:

Link to example Figma file that shows this behavior

Will need more time to think about how to implement.

[donfour]

Pausing on implementing mixed textStyleId and fillStlyeId, as those haven't been implemented yet.

Created #77 and #76 for textStyleId and fillStlyeId respectively.