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.

ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss

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

ui/packages/consul-ui/app/components/consul/external-source/index.scss

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

ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss

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

ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss

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

ui/packages/consul-ui/app/components/consul/kind/index.scss

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

ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss

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

ui/packages/consul-ui/app/components/informed-action/skin.scss

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

ui/packages/consul-ui/app/components/modal-dialog/skin.scss

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

ui/packages/consul-ui/app/components/notice/skin.scss

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

ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss

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

ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss

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

ui/packages/consul-ui/app/styles/base/typography/index.scss

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

ui/packages/consul-ui/app/styles/base/typography/semantic-variables.scss

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

ui/packages/consul-ui/app/styles/components/app-view/skin.scss

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

ui/packages/consul-ui/app/styles/components/empty-state/skin.scss

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

ui/packages/consul-ui/app/styles/routes/dc/services/index.scss

@@ -12,7 +12,7 @@ html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
   padding-bottom: 24px;
   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;
 }

ui/packages/consul-ui/app/styles/typography.scss

@@ -2,18 +2,6 @@ body,
 %form-element-text-input {
   @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,
 fieldset > header,
 %main-nav-horizontal-action,
@@ -21,18 +9,18 @@ fieldset > header,
 %table caption,
 %tbody-th,
 %form-element > span {
-  @extend %h4;
+  @extend %h400;
 }
 %internal-button,
 %breadcrumbs li > *,
 %tab-nav {
-  @extend %h5;
+  @extend %h500;
 }
 %healthcheck-output dt,
 %table th,
 %table td strong,
 %sliding-toggle label span {
-  @extend %h6;
+  @extend %h600;
 }
 
 pre code,

ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs

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