docs/typography

[m0ksem]

New docs typogpragy page

Demo with borders approved by @xx13. It allows user easily find correct code example, instead of searching correct class in long example code. Title heading can also be visible now. It was hard to find it in headers mess before.

Removed useless headings, just watch and copy example!

Added text helpers docs.

Text helpers must have an interactive example I guess, but we are good to go for now.

New demo borders

For typography it was hard to see where is header and header demo. So I decided to make border around demos like 100% other Frameworks have. It also will fit in interactive playground, which we want to implement later.

Headers margins mess

We had unlogical margins set to our typography headers to satisfy docs needs. I separated docs styles and our typography module styles. Also, now headers with typography module and va content component looks the same. All values took from Figma.

Docs headers margins

In #1479 I think what we wanted is to remove big space between title and subtitle. Made this. First subtitle was without margins before.

closes #1175

[m0ksem]

It still doesn't look perfect. Any thoughts how we can improve these docs in general and made them easier to read?

[rustem-nasyrov]

@m0ksem, maybe we should add a little playground to demonstrate available utility classes?

[asvae]

I would've called these helpers, not utils.

maybe splitting examples into different blocks would make things easier to understand?
I.e. "Text alighnment", "Text transform".

Also see bootstrap.

[rustem-nasyrov]

@xx13 we need to increase text saturation for the blockquotes, because it's barely visible, any suggestions?

[m0ksem]

@xx13 we need to increase text saturation for the blockquotes, because it's barely visible, any suggestions?

Yeah. This thing looks inappropriate 😟

Same with buttons in demo navigation below. They are not accessible.

[xx13]

it should have secondary colour which is #767C88 in designs. if we want to have secondary as primary with opacity, I'll get you % value in that case.

[asvae]

Looks good :).