body, %form-element-text-input { @extend %typo-body; } %radio-card header, fieldset > header, %main-nav-horizontal-action, %definition-table dt, %table caption, %tbody-th, %form-element > span { @extend %h400; } %internal-button, %breadcrumbs li > *, %tab-nav { @extend %h500; } %healthcheck-output dt, %table th, %table td strong, %sliding-toggle label span { @extend %h600; } pre code, %notice, %notice p, %flash-message p, %filter-bar input, %tab-section p { @extend %p1; } %menu-panel dl, %empty-state-anchor, .type-dialog, %table td p, %table td, %healthcheck-output dl > dd, %form-element-label, %stats-card header a span, %footer, %menu-panel-header, %app-view h1 span.kind-proxy { @extend %p2; } %empty-state-subheader, %empty-state p, %button, %main-content p, %form-element-note, %menu-panel-separator, %form-element-error > strong { @extend %p3; } %radio-group label { line-height: $typo-lead-200; } %tab-nav { letter-spacing: 0.03em; } /*TODO: See if we can collapse these into a */ /* strong %p3 */ %form-element-label, %button { font-weight: $typo-weight-semibold; } %menu-panel dt, %route-card section dt, %route-card header:not(.short) dd, %splitter-card > header { font-weight: $typo-weight-bold; } %menu-panel-separator { font-weight: $typo-weight-medium; } /**/ /* resets */ %menu-panel dt span, %empty-state-subheader, %main-content label a[rel*='help'], %pill, %form-element > strong, %tbody-th em, %app-view h1 em, %route-card header dt { font-weight: $typo-weight-normal; } %form-element-note, %tbody-th em, %app-view h1 em { font-style: normal; } /**/ /* composite row */ %composite-row-header { font-size: $typo-size-450; font-weight: $typo-weight-medium; } %composite-row-header *:not(button) { font-size: inherit; font-weight: inherit; } /**/ /* TODO: We have nothing else with a 500 */ /* either make this the biggest %p or don't use it */ %app-view h1 em { font-size: $typo-size-500; } /*TODO: This should go in reset, and probably needs select etc adding */ @media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) { input { font-size: 16px !important; } }