docs(app-branding-demo): adding an app title generator for navbar

[sheaivey]

I created a tool to generate the application title text people frequently ask for.

I was not sure the exact font used to create these titles. But I found one that is pretty close. Carnas Light It should be pretty easy to plug in the actual font-family found in app-branding-demo.scss and then updating all the references to use it.

The new title generator can be found in Foundations -> Brand -> App Title Generator

[sheaivey]

Updating to use Flexo-Regular font. It appears to be the actual font used in the past. I think at some point adding the font to the library will prevent some CDN delay in downloading the font having it available when the generator loads.

[corykon]

@sheaivey THANK YOU! This is awesome. Looks like an great solution.

Couple points of feedback

• The primary normal text should be a slightly gray color - #f4f3f3. The secondary bold text is just plain old #fff
• Would it be possible to base64 encode as png instead of a gif? The analytics teams always ask for pngs, but a gif may be just fine. I'll ask ASO about that
• An awesome bonus would be if we could spit out SVGs for webapps, but that sounds like a much taller order.

[aaronbrethorst]

This repo purports to convert text to svg paths: https://github.com/shrhdk/text-to-svg

[sheaivey]

• I updated the normal text color to be #f4f3f3 and the bold text to #ffffff.
• I also added output format selector. Currently canvas only supports png or jpeg.

It would be fun in the future to give the text-to-svg library a try that @aaronbrethorst mentioned.

[health-catalyst]

:tada: This PR is included in version 16.1.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: