[K7] Add Typography components

[cjcenizal]

No description provided.

[snide]

Neat!

The title classes are all actually $kuiFullShade (black) which gives them some small contrast against default text.

Object title is not italic. If italics are used, it would be discretionary and I'd expect to apply that through a generic <em> wrapper or a utility class.

Although you took these names from the design (sorry), I'd go instead with kuiTitle, kuiTitle--large, kuiTitle--small so they are less genetically tied to function. This also follows closer with the patterns we're establishing of tshirt sizing everything.

I'd also make classes for the following to cover all typography used.

1. utility classes for size based on the partials/mixins that were made (kui--fontSizeSmall...etc).
2. utility classes for color (kui--textSubdued). Should be utility because you want it to be applied to anything, regardless of origin component.
3. A code/mono utility using Roboto Mono.

[cjcenizal]

@snide Ready for your 👀 again!

[snide]

All good.

[snide]

Sorry, should be kuiTitleSmall to fit with conventions we're using. Sizing is always on the end in our current stuff. We should prolly add this kind of namespacing pattern to our styleguide.

[cjcenizal]

@snide Can we create an exception to that rule when we're building components? Going off the idea that we should use the same language when discussing a component in Sketch, CSS, React, and in the browser, I'd like to keep the names as close to natural language as possible. Which would mean adjectives first and nouns last, e.g. "Modal header", "Large title". This should make it easier to discuss, think about, and find components.

[snide]

We discussed offline and decided to make these modifiers.