Typography

[josuebran]

Typography

• Updates color, font weight and line height of docs, breadcrumbs and toc menu
• Updates font size with css calc method used in antora. Please let me know if we should use another method.

Formatting Headers and titles

• Updates padding and margin for headers and title
• Updates padding and margin for body, article, toc sidebar and breadcrumb

Demo: https://docs-ui-typography.netlify.app/docs/

[colegoldsmith]

Nice change using the tokens! Lol I'm not sure why I set that to the disabled color

[colegoldsmith]

Looks great! Nice work

[colegoldsmith]

@josuebran Do you think adding postcss-mixins would give us some good utility for work like this? Something like

@define-mixin h1 {
  font-size: calc(24 / var(--rem-base) * 1rem)
  font-weight: 500
}

Then to implement in a selector

.class-name {
  @mixin h1;
}

[josuebran]

@colegoldsmith Yes, postcss-mixins would be helpful

[colegoldsmith]

@josuebran Do you want to add postcss mixins to the gulp build and make the change in this PR? Otherwise you can just merge this and refactor once we get the plugin added later