From 92f0eb3bdca1330ee17c629a29f420e7a3d9c988 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 26 Jan 2021 17:53:45 +0000
Subject: [PATCH] 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.
---
 .../consul/discovery-chain/skin.scss          |  4 +-
 .../consul/external-source/index.scss         |  2 +-
 .../consul/health-check/list/skin.scss        |  3 +-
 .../intention/permission/form/skin.scss       |  1 +
 .../app/components/consul/kind/index.scss     |  2 +-
 .../consul/lock-session/form/index.scss       |  1 +
 .../app/components/informed-action/skin.scss  |  2 +-
 .../app/components/modal-dialog/skin.scss     |  3 ++
 .../consul-ui/app/components/notice/skin.scss |  3 +-
 .../base/components/form-elements/skin.scss   |  3 ++
 .../base/typography/base-placeholders.scss    | 43 +++++++++++--------
 .../app/styles/base/typography/index.scss     |  1 -
 .../base/typography/semantic-variables.scss   |  3 --
 .../app/styles/components/app-view/skin.scss  |  3 ++
 .../styles/components/empty-state/skin.scss   |  3 ++
 .../app/styles/routes/dc/services/index.scss  |  4 +-
 .../consul-ui/app/styles/typography.scss      | 18 ++------
 .../dc/services/instance/metadata.hbs         |  4 +-
 18 files changed, 52 insertions(+), 51 deletions(-)
 delete mode 100644 ui/packages/consul-ui/app/styles/base/typography/semantic-variables.scss

diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
index 446980c886..e38efdb6a5 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
@@ -49,9 +49,7 @@
 }
 %chain-group > header > * {
   text-transform: uppercase;
-  border: 0;
-  font-size: 12px;
-  font-weight: normal;
+  @extend %p3;
 }
 %chain-group > header span::after {
   @extend %with-info-circle-outline-icon, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.scss b/ui/packages/consul-ui/app/components/consul/external-source/index.scss
index c74f871a92..8cc460f164 100644
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.scss
+++ b/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;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
index cea1d04832..0f9b645a91 100644
--- a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
@@ -15,8 +15,7 @@
   }
 }
 %healthcheck-output header > * {
-  @extend %h3;
-  font-size: $typo-header-300;
+  @extend %h300;
 }
 %healthcheck-output dd em {
   @extend %pill;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
index 73ea8197be..ba4ac03567 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
+++ b/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;
diff --git a/ui/packages/consul-ui/app/components/consul/kind/index.scss b/ui/packages/consul-ui/app/components/consul/kind/index.scss
index f9bde2cc38..7467195f2c 100644
--- a/ui/packages/consul-ui/app/components/consul/kind/index.scss
+++ b/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;
diff --git a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
index 55c1b7d670..fd25dee9fe 100644
--- a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
+++ b/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;
diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss
index 958f42cc94..0e1ab9c406 100644
--- a/ui/packages/consul-ui/app/components/informed-action/skin.scss
+++ b/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;
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
index f06dbef4db..292ef8367b 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/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,
diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss
index befc8b83a9..514b721e91 100644
--- a/ui/packages/consul-ui/app/components/notice/skin.scss
+++ b/ui/packages/consul-ui/app/components/notice/skin.scss
@@ -7,8 +7,7 @@
   @extend %as-pseudo;
 }
 %notice header > * {
-  @extend %h3;
-  font-size: $typo-header-300;
+  @extend %h300;
 }
 %notice footer * {
   @extend %p3;
diff --git a/ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss b/ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss
index 13cb9cdaa8..17dcbcd062 100644
--- a/ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss
+++ b/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 {
diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
index c62cf349dc..95a60a1062 100644
--- a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
@@ -12,42 +12,49 @@
 %typo-header {
   line-height: $typo-lead-200;
 }
-%h1,
-%h2,
-%h3,
-%h4,
-%h5,
-%h6 {
+%h000,
+%h100,
+%h200,
+%h300,
+%h400,
+%h500,
+%h600,
+%h400,
+%h500,
+%h600 {
   @extend %typo-header;
 }
-%h1 {
+%h100 {
   font-weight: $typo-weight-bold;
 }
-%h2,
-%h3,
-%h4 {
+%h200,
+%h300,
+%h400 {
   font-weight: $typo-weight-semibold;
 }
-%h5,
-%h6 {
+%h500,
+%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,
-%h5 {
+%h400,
+%h500 {
   font-size: $typo-size-600;
 }
 /*p2 strong */
-%h6 {
+%h600 {
   font-size: $typo-size-700;
 }
 %typo-p {
diff --git a/ui/packages/consul-ui/app/styles/base/typography/index.scss b/ui/packages/consul-ui/app/styles/base/typography/index.scss
index 7dc7ac5a75..3fe0d277f0 100644
--- a/ui/packages/consul-ui/app/styles/base/typography/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/typography/index.scss
@@ -1,3 +1,2 @@
 @import './base-variables';
-@import './semantic-variables';
 @import './base-placeholders';
diff --git a/ui/packages/consul-ui/app/styles/base/typography/semantic-variables.scss b/ui/packages/consul-ui/app/styles/base/typography/semantic-variables.scss
deleted file mode 100644
index 48cc6cb3e9..0000000000
--- a/ui/packages/consul-ui/app/styles/base/typography/semantic-variables.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$typo-header-100: $typo-size-200;
-$typo-header-200: $typo-size-300;
-$typo-header-300: $typo-size-500;
diff --git a/ui/packages/consul-ui/app/styles/components/app-view/skin.scss b/ui/packages/consul-ui/app/styles/components/app-view/skin.scss
index cc252099b1..840cfc2641 100644
--- a/ui/packages/consul-ui/app/styles/components/app-view/skin.scss
+++ b/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;
 }
diff --git a/ui/packages/consul-ui/app/styles/components/empty-state/skin.scss b/ui/packages/consul-ui/app/styles/components/empty-state/skin.scss
index 96dab20255..da470e4ac5 100644
--- a/ui/packages/consul-ui/app/styles/components/empty-state/skin.scss
+++ b/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;
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
index e13631e503..1bd551e59d 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
+++ b/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.proxy'] .tab-section section h3 {
+html[data-route^='dc.services.instance.metadata'] .tab-section section h2 {
+  @extend %h300;
   margin: 24px 0 12px 0;
 }
diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss
index 8948d39fea..0577d9f2f6 100644
--- a/ui/packages/consul-ui/app/styles/typography.scss
+++ b/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,
diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs
index d2eceda871..0f4a4328df 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs
+++ b/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}}