ui: Re-organize our %h* placeholders (#9584)

We've always had this idea of being able to markup up information
semantically without thinking about what it should look like, then
applying our %h* placeholder styles to control what the information
should look like.

Back when we originally made our set of %h* placeholders, we tried to
follow Structure as much as possible, which defined the largest header
(which we thought would have been the h1 style) as a super large 3.5rem.

Therefore we made our set of %h* placeholders the same as Structure
beginning at a huge 3.5 size. We then re-overwrote those sizes only in
Consul specific CSS files thinking that this was due to us existing
before Structure did.

Lately we saw an extra clue in Structure - the extra large 3.5 header was
called 'h0'.

This commit moves all our headers to use a zero based scale, and
additionally uses our 3 digit scale as opposed to 1 digit (h1 vs h100),
similar to our color scales (note we don't use a hypen, which we can
alter later if need be), which means we can insert additional h150 etc
if need be.

Additional we stop styling our headers globally (h1 { @extend %h100; }
). This means there is no reason not to use headers for marking up
content depending on what it is rather than what it should look like,
and as a consequence means we can be more purposeful in ordering h*
tags.

Lastly, we use the new scale over the entire codebase and update a
couple of places where we were using using header tags due to what the
styleing for them looked like rather than what the meaning/order was.
This commit is contained in:
John Cowen 2021-01-26 17:53:45 +00:00 committed by GitHub
parent 5c7f815469
commit 92f0eb3bdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 52 additions and 51 deletions

View File

@ -49,9 +49,7 @@
} }
%chain-group > header > * { %chain-group > header > * {
text-transform: uppercase; text-transform: uppercase;
border: 0; @extend %p3;
font-size: 12px;
font-weight: normal;
} }
%chain-group > header span::after { %chain-group > header span::after {
@extend %with-info-circle-outline-icon, %as-pseudo; @extend %with-info-circle-outline-icon, %as-pseudo;

View File

@ -1,3 +1,3 @@
.consul-external-source { .consul-external-source {
@extend %pill-200, %frame-gray-600; @extend %pill-200, %frame-gray-600, %p1;
} }

View File

@ -15,8 +15,7 @@
} }
} }
%healthcheck-output header > * { %healthcheck-output header > * {
@extend %h3; @extend %h300;
font-size: $typo-header-300;
} }
%healthcheck-output dd em { %healthcheck-output dd em {
@extend %pill; @extend %pill;

View File

@ -1,6 +1,7 @@
.consul-intention-permission-form { .consul-intention-permission-form {
h2 { h2 {
border-top: 1px solid $blue-500; border-top: 1px solid $blue-500;
@extend %h200;
} }
button.type-submit { button.type-submit {
@extend %frame-blue-300; @extend %frame-blue-300;

View File

@ -1,5 +1,5 @@
.consul-kind { .consul-kind {
@extend %pill-200, %frame-gray-600; @extend %pill-200, %frame-gray-600, %p1;
} }
.consul-kind::before { .consul-kind::before {
@extend %with-gateway-mask, %as-pseudo; @extend %with-gateway-mask, %as-pseudo;

View File

@ -1,5 +1,6 @@
.consul-lock-session-form { .consul-lock-session-form {
h2 { h2 {
@extend %h200;
border-bottom: $decor-border-200; border-bottom: $decor-border-200;
border-color: $gray-200; border-color: $gray-200;
padding-bottom: .2em; padding-bottom: .2em;

View File

@ -11,7 +11,7 @@
cursor: default; cursor: default;
} }
header { header {
@extend %h4; @extend %h400;
} }
header > * { header > * {
@extend %typo-inherit; @extend %typo-inherit;

View File

@ -28,6 +28,9 @@
%modal-window > header { %modal-window > header {
@extend %frame-gray-800; @extend %frame-gray-800;
} }
%modal-window > header > * {
@extend %h200;
}
.modal-dialog-body, .modal-dialog-body,
%modal-window > footer, %modal-window > footer,

View File

@ -7,8 +7,7 @@
@extend %as-pseudo; @extend %as-pseudo;
} }
%notice header > * { %notice header > * {
@extend %h3; @extend %h300;
font-size: $typo-header-300;
} }
%notice footer * { %notice footer * {
@extend %p3; @extend %p3;

View File

@ -6,6 +6,9 @@
border: $decor-border-100; border: $decor-border-100;
outline: none; outline: none;
} }
%form h2 {
@extend %h200;
}
%form fieldset > p, %form fieldset > p,
%form-element-note, %form-element-note,
%form-element-text-input::placeholder { %form-element-text-input::placeholder {

View File

@ -12,42 +12,49 @@
%typo-header { %typo-header {
line-height: $typo-lead-200; line-height: $typo-lead-200;
} }
%h1, %h000,
%h2, %h100,
%h3, %h200,
%h4, %h300,
%h5, %h400,
%h6 { %h500,
%h600,
%h400,
%h500,
%h600 {
@extend %typo-header; @extend %typo-header;
} }
%h1 { %h100 {
font-weight: $typo-weight-bold; font-weight: $typo-weight-bold;
} }
%h2, %h200,
%h3, %h300,
%h4 { %h400 {
font-weight: $typo-weight-semibold; font-weight: $typo-weight-semibold;
} }
%h5, %h500,
%h6 { %h600 {
font-weight: $typo-weight-medium; font-weight: $typo-weight-medium;
} }
%h1 { %h000 {
font-size: $typo-size-100; font-size: $typo-size-100;
} }
%h2 { %h100 {
font-size: $typo-size-200; font-size: $typo-size-200;
} }
%h3 { %h200 {
font-size: $typo-size-300; font-size: $typo-size-300;
} }
%h300 {
font-size: $typo-size-500;
}
/*p1 strong, differing weights */ /*p1 strong, differing weights */
%h4, %h400,
%h5 { %h500 {
font-size: $typo-size-600; font-size: $typo-size-600;
} }
/*p2 strong */ /*p2 strong */
%h6 { %h600 {
font-size: $typo-size-700; font-size: $typo-size-700;
} }
%typo-p { %typo-p {

View File

@ -1,3 +1,2 @@
@import './base-variables'; @import './base-variables';
@import './semantic-variables';
@import './base-placeholders'; @import './base-placeholders';

View File

@ -1,3 +0,0 @@
$typo-header-100: $typo-size-200;
$typo-header-200: $typo-size-300;
$typo-header-300: $typo-size-500;

View File

@ -4,6 +4,9 @@
%app-view-title { %app-view-title {
border-bottom: $decor-border-100; border-bottom: $decor-border-100;
} }
%app-view-title > *:first-child {
@extend %h100;
}
%app-view-content form:not(.filter-bar) fieldset { %app-view-content form:not(.filter-bar) fieldset {
border-bottom: $decor-border-200; border-bottom: $decor-border-200;
} }

View File

@ -8,6 +8,9 @@
%empty-state-header { %empty-state-header {
border-bottom: none; border-bottom: none;
} }
%empty-state-header {
@extend %h200;
}
/* Icons */ /* Icons */
%empty-state header::before { %empty-state header::before {
font-size: 2.6em; font-size: 2.6em;

View File

@ -12,7 +12,7 @@ html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
padding-bottom: 24px; padding-bottom: 24px;
border-bottom: 1px solid $gray-200; border-bottom: 1px solid $gray-200;
} }
html[data-route^='dc.services.instance.metadata'] .tab-section section h3, html[data-route^='dc.services.instance.metadata'] .tab-section section h2 {
html[data-route^='dc.services.instance.proxy'] .tab-section section h3 { @extend %h300;
margin: 24px 0 12px 0; margin: 24px 0 12px 0;
} }

View File

@ -2,18 +2,6 @@ body,
%form-element-text-input { %form-element-text-input {
@extend %typo-body; @extend %typo-body;
} }
h1 {
@extend %h1;
font-size: $typo-header-100;
}
h2 {
@extend %h2;
font-size: $typo-header-200;
}
h3 {
@extend %h3;
font-size: $typo-header-300;
}
%radio-card header, %radio-card header,
fieldset > header, fieldset > header,
%main-nav-horizontal-action, %main-nav-horizontal-action,
@ -21,18 +9,18 @@ fieldset > header,
%table caption, %table caption,
%tbody-th, %tbody-th,
%form-element > span { %form-element > span {
@extend %h4; @extend %h400;
} }
%internal-button, %internal-button,
%breadcrumbs li > *, %breadcrumbs li > *,
%tab-nav { %tab-nav {
@extend %h5; @extend %h500;
} }
%healthcheck-output dt, %healthcheck-output dt,
%table th, %table th,
%table td strong, %table td strong,
%sliding-toggle label span { %sliding-toggle label span {
@extend %h6; @extend %h600;
} }
pre code, pre code,

View File

@ -1,6 +1,6 @@
<div class="tab-section"> <div class="tab-section">
<section class="tags"> <section class="tags">
<h3>Tags</h3> <h2>Tags</h2>
{{#if (gt item.Tags.length 0) }} {{#if (gt item.Tags.length 0) }}
<TagList @item={{item}} /> <TagList @item={{item}} />
{{else}} {{else}}
@ -14,7 +14,7 @@
{{/if}} {{/if}}
</section> </section>
<section class="metadata"> <section class="metadata">
<h3>Meta</h3> <h2>Meta</h2>
{{#if item.Meta}} {{#if item.Meta}}
<Consul::Metadata::List @items={{entries item.Meta}} /> <Consul::Metadata::List @items={{entries item.Meta}} />
{{else}} {{else}}