feat: update typography to consume hds styles (#16577)

.changelog/16577.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: update typography to styles from hds
+```

ui/packages/consul-peerings/app/components/consul/peer/components.scss

@@ -18,8 +18,8 @@
 %pill-failing,
 %pill-terminated,
 %pill-deleting {
-  font-weight: var(--typo-weight-medium);
+  @extend .hds-font-weight-medium;
-  font-size: var(--typo-size-700);
+  font-size: var(--token-typography-body-200-font-size);
 }
 
 %pill-pending::before {

ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs

@@ -18,7 +18,7 @@
 
         <fsm.State @matches={{array "idle" "error"}}>
           <fsm.State @matches={{"error"}}>
-            <Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
+            <Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
               <A.Title>Error</A.Title>
               <A.Description>{{fsm.state.context.error.message}}</A.Description>
             </Hds::Alert>

ui/packages/consul-peerings/app/components/consul/peer/form/index.scss

@@ -48,11 +48,10 @@
     z-index: 2;
   }
   li::after {
+    @extend %body-200-semibold;
     content: counter(hexagonal-counter);
     position: absolute;
     top: 0px;
-    font-size: 14px;
-    font-weight: var(--typo-weight-bold);
     background-color: var(--token-color-palette-neutral-0);
     z-index: 1;
     text-align: center;

ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs

@@ -19,7 +19,7 @@
     as |writer|
   >
     <BlockSlot @name="error" as |after error|>
-      <Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
+      <Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
         <A.Title>Error</A.Title>
         <A.Description>{{error.message}}</A.Description>
       </Hds::Alert>

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

@@ -3,9 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-%app-view-title-left-container > *:first-child {
-  @extend %h100;
-}
 %app-view-title {
   border-bottom: var(--decor-border-100);
 }

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

@@ -78,12 +78,11 @@ main {
   @extend %transition-pushover;
 }
 %footer {
+  @extend %body-100-regular;
   position: fixed;
   z-index: 50;
 
   color: var(--token-color-foreground-disabled);
-  font-size: var(--typo-size-800);
-
   width: 250px;
   padding-left: 25px;
 }

ui/packages/consul-ui/app/components/auth-form/skin.scss

@@ -4,7 +4,7 @@
  */
 
 %auth-form em {
-  @extend %p3;
+  @extend %body-100-regular;
   color: var(--token-color-foreground-faint);
   font-style: normal;
 }

ui/packages/consul-ui/app/components/auth-profile/index.scss

@@ -7,13 +7,13 @@
   padding: 0.9em 1em;
 }
 .auth-profile {
-  @extend %p2;
+  @extend %body-100-regular;
 }
 .auth-profile dt span {
-  font-weight: var(--typo-weight-normal);
+  font-weight: var(--token-typography-font-weight-regular);
 }
 .auth-profile dt {
-  font-weight: var(--typo-weight-bold);
+  font-weight: var(--token-typography-font-weight-bold);
 }
 .auth-profile dt,
 .auth-profile dd {

ui/packages/consul-ui/app/components/brand-loader/index.hbs

@@ -1,8 +1,3 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
 <div
   class="brand-loader"
   style="margin-left: calc(-{{@width}}px / 2)"

ui/packages/consul-ui/app/components/code-editor/index.hbs

@@ -39,4 +39,4 @@
   @options={{options}}
   @valueUpdated={{action onkeyup}}
 />
-<pre><code>{{#if (has-block "content")}}{{yield to="content"}}{{else}}{{value}}{{/if}}</code></pre>
+<pre><code>{{#if (has-block 'content')}}{{yield to='content'}}{{else}}{{value}}{{/if}}</code></pre>

ui/packages/consul-ui/app/components/code-editor/skin.scss

@@ -39,12 +39,11 @@ $syntax-dark-gray: #535f73;
   overflow-x: hidden !important;
 }
 .CodeMirror-lint-tooltip {
+  @extend %code-100-regular;
   background-color: #f9f9fa;
   border: 1px solid var(--syntax-light-gray);
   border-radius: 0;
   color: lighten(#000, 13%);
-  font-family: var(--typo-family-mono);
-  font-size: 13px;
   padding: 7px 8px 9px;
 }
 
@@ -54,7 +53,7 @@ $syntax-dark-gray: #535f73;
     background-color: var(--token-color-hashicorp-brand) !important;
     color: #cfd2d1 !important;
     border: none;
-    font-family: var(--typo-family-mono);
+    font-family: var(--token-typography-font-stack-code);
     -webkit-font-smoothing: auto;
     line-height: 1.4;
   }
@@ -210,9 +209,8 @@ $syntax-dark-gray: #535f73;
 
     .toolbar {
       .title {
+        @extend %body-200-semibold;
         color: var(--token-color-foreground-strong);
-        font-size: 14px;
-        font-weight: 700;
       }
       .toolbar-separator {
         border-right: 1px solid var(--token-color-palette-neutral-300);

ui/packages/consul-ui/app/components/composite-row/index.scss

@@ -74,6 +74,9 @@
 %composite-row .copy-button {
   display: inline-flex;
 }
+%composite-row .copy-button button {
+  @extend %body-100-medium;
+}
 %composite-row-header .copy-button {
   margin-left: 4px;
 }

ui/packages/consul-ui/app/components/consul/auth-method/index.scss

@@ -15,23 +15,21 @@
 .consul-auth-method-view {
   margin-bottom: 32px;
   section {
-    @extend %p1;
+    @extend %body-200-regular;
     width: 100%;
     position: relative;
     overflow-y: auto;
     h2 {
-      @extend %h200;
+      @extend %display-400-semibold;
       padding-bottom: 12px;
     }
     table {
       thead td {
+        @extend %body-200-semibold;
         color: var(--token-color-foreground-faint);
-        font-weight: var(--typo-weight-semibold);
-        font-size: var(--typo-size-700);
       }
       tbody {
         td {
-          font-size: var(--typo-size-600);
           color: var(--token-color-hashicorp-brand);
         }
         tr {
@@ -61,7 +59,7 @@
     margin-bottom: 4px !important;
   }
   h2 {
-    @extend %h200;
+    @extend %display-400-semibold;
     padding-bottom: 12px;
   }
   dl {
@@ -77,14 +75,12 @@
 .consul-auth-method-nspace-list {
   thead {
     td {
+      @extend %body-200-semibold;
       color: var(--token-color-foreground-faint) !important;
-      font-weight: var(--typo-weight-semibold) !important;
-      font-size: var(--typo-size-700) !important;
     }
   }
   tbody {
     td {
-      font-size: var(--typo-size-600);
       color: var(--token-color-hashicorp-brand);
     }
     tr {

ui/packages/consul-ui/app/components/consul/bucket/list/index.scss

@@ -20,7 +20,7 @@
     @extend %with-network-alt-mask, %as-pseudo;
   }
   .service + dd {
-    font-weight: var(--typo-weight-semibold);
+    @extend .hds-font-weight-semibold;
   }
   /* potential for some sort of %composite-kv thing here */
   dd:not(:last-child)::after {

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

@@ -57,7 +57,7 @@
 }
 %chain-group > header > * {
   text-transform: uppercase;
-  @extend %p3;
+  @extend %body-100-regular;
 }
 %chain-group > header span::after {
   @extend %with-info-circle-outline-icon, %as-pseudo;

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

@@ -4,7 +4,7 @@
  */
 
 .consul-external-source {
-  @extend %pill-200, %frame-gray-600, %p1;
+  @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
 
 .consul-external-source::before {

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

@@ -20,7 +20,7 @@
   }
 }
 %healthcheck-output header > * {
-  @extend %h300;
+  @extend %display-300-semibold;
 }
 %healthcheck-output dd em {
   @extend %pill;

ui/packages/consul-ui/app/components/consul/intention/components.scss

@@ -11,9 +11,9 @@
 %pill-allow,
 %pill-deny,
 %pill-l7 {
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-200-font-size);
   display: inline-block;
-  font-weight: var(--typo-weight-normal);
-  font-size: var(--typo-size-600);
 }
 %pill-allow {
   color: var(--token-color-foreground-success-on-surface);

ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss

@@ -17,7 +17,7 @@
     display: inline;
   }
   .permissions > button {
-    @extend %anchor, %p2;
+    @extend %anchor, %body-100-regular;
     float: right;
   }
 }

ui/packages/consul-ui/app/components/consul/intention/form/index.scss

@@ -7,9 +7,6 @@
   .modal-dialog-window {
     max-width: 450px;
   }
-  .modal-dialog-body p {
-    font-size: var(--typo-size-600);
-  }
   button.dangerous {
     @extend %dangerous-button;
   }

ui/packages/consul-ui/app/components/consul/intention/list/components.scss

@@ -20,4 +20,7 @@
   td.intent- strong {
     @extend %pill-l7;
   }
+  td.permissions {
+    @extend %body-100-regular;
+  }
 }

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

@@ -6,7 +6,7 @@
 .consul-intention-permission-form {
   h2 {
     border-top: 1px solid var(--token-color-foreground-action);
-    @extend %h200;
+    @extend %display-400-semibold;
   }
   button.type-submit {
     @extend %frame-blue-300;
@@ -22,6 +22,6 @@
 
 .consul-intention-view {
   h2 {
-    @extend %h200;
+    @extend %display-400-semibold;
   }
 }

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

@@ -4,7 +4,7 @@
  */
 
 .consul-kind {
-  @extend %pill-200, %frame-gray-600, %p1;
+  @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
 .consul-kind::before {
   @extend %with-gateway-mask, %as-pseudo;

ui/packages/consul-ui/app/components/consul/server/card/skin.scss

@@ -10,13 +10,13 @@
   @extend %with-leader-tile;
 }
 %consul-server-card .name + dd {
-  @extend %h300;
+  @extend %display-200-semibold;
   color: var(--token-color-hashicorp-brand);
   animation-name: typo-truncate;
 }
 %consul-server-card .health-status + dd {
   @extend %pill-200;
-  font-size: var(--typo-size-700);
+  @extend %body-100-regular;
 }
 %consul-server-card.voting-status-non-voter .health-status + dd {
   background-color: var(--token-color-surface-strong);

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

@@ -4,5 +4,5 @@
  */
 
 .consul-source {
-  @extend %pill-200, %frame-gray-600, %p1;
+  @extend %pill-200, %frame-gray-600, %body-200-regular;
 }

ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss

@@ -34,7 +34,6 @@
     stroke: var(--token-color-palette-neutral-300);
   }
   .tick text {
-    font-size: var(--typo-size-600);
     text-anchor: start;
     color: var(--token-color-foreground-strong);
   }

ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss

@@ -26,7 +26,7 @@
   dl.local-bind-socket-mode dt {
     @extend %horizontal-kv-list-visible-title;
     text-transform: lowercase;
-    font-weight: var(--typo-weight-semibold);
+    font-weight: var(--token-typography-font-weight-semibold);
   }
 }
 .consul-upstream-instance-list {

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

@@ -11,7 +11,7 @@
   border-bottom: none;
 }
 %empty-state-header {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 /* Icons */
 %empty-state header::before {
@@ -22,8 +22,8 @@
   margin-right: 10px;
 }
 %empty-state-anchor::before {
+  @extend %body-200-regular;
   margin-right: 0.5em;
-  font-size: 0.9em;
 }
 %empty-state[class*='status-'] header::before {
   @extend %as-pseudo;

ui/packages/consul-ui/app/components/form-elements/index.scss

@@ -7,7 +7,7 @@
 @import './layout';
 %form h2,
 .modal-dialog-body h2 {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 /* TODO: This is positioning the element */
 /* probably should be in a special %form class*/

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

@@ -23,7 +23,7 @@
   nav .dcs .dc-name {
     color: var(--token-color-foreground-faint);
     padding: 3.25px 0px;
-    font-weight: var(--typo-weight-semibold);
+    font-weight: var(--token-typography-font-weight-semibold);
   }
   nav .dcs .dc-name span {
     @extend %pill-200;

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

@@ -16,13 +16,13 @@
     cursor: default;
   }
   header {
-    @extend %h400;
+    @extend %display-100-semibold;
   }
   header > * {
     @extend %typo-inherit;
   }
   p {
-    @extend %p2;
+    @extend %body-100-regular;
     color: var(--token-color-hashicorp-brand);
   }
   > ul {

ui/packages/consul-ui/app/components/inline-alert/skin.scss

@@ -5,7 +5,7 @@
 
 %inline-alert {
   font-style: normal;
-  font-weight: normal;
+  font-weight: var(--token-typography-font-weight-regular);
 }
 %inline-alert-success,
 %inline-alert-info,
@@ -20,7 +20,7 @@
   color: var(--token-color-foreground-critical);
 }
 %inline-alert::before {
-  font-size: 14px;
+  @extend %body-200-regular;
 }
 %inline-alert::before {
   @extend %as-pseudo;

ui/packages/consul-ui/app/components/list-row/layout.scss

@@ -60,5 +60,5 @@
   top: 30px;
 }
 %list-row-200 dd {
-  @extend %p2;
+  @extend %body-100-regular;
 }

ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss

@@ -4,7 +4,7 @@
  */
 
 %main-nav-vertical-action {
-  @extend %p1;
+  @extend %body-200-medium;
   cursor: pointer;
   border-right: var(--decor-border-400);
   border-color: transparent;
@@ -14,9 +14,8 @@
   font-size: inherit;
 }
 %main-nav-vertical [role='separator'] {
-  @extend %p3;
+  @extend %body-100-medium;
   text-transform: uppercase;
-  font-weight: var(--typo-weight-medium);
 }
 %main-nav-vertical-action-intent {
   text-decoration: underline;

ui/packages/consul-ui/app/components/menu-panel/skin.scss

@@ -7,7 +7,7 @@
   @extend %with-check-plain-mask, %as-pseudo;
 }
 %menu-panel-header {
-  @extend %p2;
+  @extend %body-100-regular;
 }
 %menu-panel-header + ul {
   border-top: var(--decor-border-100);
@@ -19,9 +19,8 @@
   border: none;
 }
 %menu-panel-separator {
-  @extend %p3;
+  @extend %body-100-medium;
   text-transform: uppercase;
-  font-weight: var(--typo-weight-medium);
   color: var(--token-color-foreground-faint);
 }
 %menu-panel-item {

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

@@ -9,8 +9,7 @@
   color: var(--token-color-vault-foreground);
 }
 %modal-dialog.warning header > *:not(label) {
-  font-size: var(--typo-size-500);
+  @extend %display-300-semibold;
-  font-weight: var(--typo-weight-semibold);
 }
 %modal-dialog.warning header::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
@@ -35,7 +34,7 @@
   @extend %frame-gray-800;
 }
 %modal-window > header > *:not(button) {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 
 .modal-dialog-body,

ui/packages/consul-ui/app/components/oidc-select/index.scss

@@ -11,7 +11,7 @@
 
 %oidc-select button.reset {
   @extend %anchor;
-  @extend %p3;
+  @extend %body-100-regular;
 }
 .oidc-select {
   @extend %oidc-select;

ui/packages/consul-ui/app/components/peerings/badge/index.scss

@@ -41,7 +41,6 @@
   }
 
   .peerings-badge__text {
-    font-weight: 500;
+    @extend %body-100-medium;
-    font-size: 13px;
   }
 }

ui/packages/consul-ui/app/components/table/layout.scss

@@ -61,7 +61,7 @@
 %table tbody td em {
   display: block;
   font-style: normal;
-  font-weight: normal;
+  font-weight: var(--token-typography-font-weight-regular);
 }
 %table tbody td em {
   color: var(--token-color-foreground-faint);

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

@@ -7,11 +7,12 @@
 %table td {
   border-bottom: var(--decor-border-100);
 }
-%table th {
+%table th,
+%tbody-th {
   border-color: var(--token-color-palette-neutral-300);
 }
 %table td {
-  border-color: var(--token-color-surface-interactive-active);
+  border-color: var(--token-color-palette-neutral-300);
   color: var(--token-color-foreground-faint);
 }
 %table th,
@@ -22,10 +23,9 @@
  * current th's to `thead th` and changing the templates
  * at whichpoint we can probably remove the %table a selector from here
  */
-%table a,
+%table a {
-%tbody-th {
   color: var(--token-color-foreground-strong);
 }
-%table td:first-child {
+%table th {
   @extend %tbody-th;
 }

ui/packages/consul-ui/app/components/tabular-dl/skin.scss

@@ -14,7 +14,7 @@
     color: var(--token-color-hashicorp-brand) !important;
   }
   dt {
-    font-weight: var(--typo-weight-bold);
+    font-weight: var(--token-typography-font-weight-bold);
   }
   dd .copy-button button::before {
     background-color: var(--token-color-hashicorp-brand);

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

@@ -27,7 +27,7 @@
   }
 }
 %tooltip-content {
-  @extend %p3;
+  @extend %body-100-regular;
   padding: 12px;
   max-width: 224px;
   position: relative;

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -19,9 +19,8 @@
   /* border property then the compressor removes the color */
   border-color: var(--token-color-surface-interactive-active);
   p {
+    @extend %display-300-semibold;
     padding: 12px 12px 0 12px;
-    font-size: var(--typo-size-500);
-    font-weight: var(--typo-weight-semibold);
     margin-bottom: 0 !important;
   }
   p.empty {

ui/packages/consul-ui/app/components/topology-metrics/layout.scss

@@ -61,10 +61,9 @@
   grid-area: metrics;
 
   div:first-child {
+    @extend %body-300-semibold;
     padding: 12px;
     border: none;
-    font-size: 16px;
-    font-weight: bold;
   }
   .link {
     padding: 18px;

ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss

@@ -9,10 +9,8 @@
   }
 
   .tooltip {
+    @extend %body-200-regular;
     padding: 0 0 10px;
-    font-size: 0.875em;
-    line-height: 1.5em;
-    font-weight: normal;
     border: 1px solid var(--token-color-palette-neutral-300);
     background: #fff;
     border-radius: 2px;
@@ -20,9 +18,8 @@
     box-shadow: var(--token-elevation-higher-box-shadow);
 
     .sparkline-time {
+      @extend %body-200-semibold;
       padding: 8px 10px;
-      font-weight: bold;
-      font-size: 14px;
       color: #000;
       border-bottom: 1px solid var(--token-color-surface-interactive-active);
       margin-bottom: 4px;
@@ -76,17 +73,17 @@
   h3::before {
     @extend %with-info-circle-fill-mask, %as-pseudo;
     margin: 2px 3px 0 0;
-    font-size: 14px;
+    font-size: var(--token-typography-body-200-font-size);
   }
 
   h3 {
+    @extend %display-300-semibold;
     color: var(--token-color-foreground-strong);
-    font-size: 16px;
   }
 
   .sparkline-key-content {
     dt {
-      font-weight: 600;
+      font-weight: var(--token-typography-font-weight-semibold);
     }
     dd {
       color: var(--token-color-foreground-faint);

ui/packages/consul-ui/app/components/topology-metrics/status/index.scss

@@ -5,8 +5,7 @@
 
 .topology-metrics-status-error,
 .topology-metrics-status-loader {
-  font-weight: normal;
+  @extend %body-200-regular;
-  font-size: 0.875rem;
   color: var(--token-color-foreground-faint);
   text-align: center;
   margin: 0 auto !important;

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

@@ -4,7 +4,7 @@
  */
 
 %with-glyph-icon {
-  font-weight: var(--typo-weight-normal);
+  font-weight: var(--token-typography-font-weight-regular);
   background-color: var(--token-color-surface-strong);
   visibility: visible;
   padding: 0 4px;

ui/packages/consul-ui/app/styles/base/reset/base-variables.scss

@@ -10,10 +10,6 @@
   margin: 0;
   padding: 0;
 }
-%reset-typo {
-  font-size: 100%;
-  font-weight: normal;
-}
 
 %reset-list {
   list-style: none;

ui/packages/consul-ui/app/styles/base/reset/minireset.scss

@@ -17,25 +17,10 @@ figure,
 fieldset,
 legend,
 textarea,
-pre,
 iframe,
-hr,
+hr {
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
   @extend %reset-box;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @extend %reset-typo;
-}
 
 ul {
   @extend %reset-list;

ui/packages/consul-ui/app/styles/base/reset/system.scss

@@ -27,25 +27,22 @@ hr {
   background-color: var(--token-color-surface-interactive-active);
 }
 html {
-  font-size: var(--typo-size-000);
+  font-size: 16px;
-}
-/* %typo-body */
-body {
-  line-height: 1.5;
 }
+
 body,
 input,
 select,
 textarea {
-  font-family: var(--typo-family-sans);
+  font-family: var(--token-typography-font-stack-text);
 }
 code,
 pre {
-  font-family: var(--typo-family-mono);
+  font-family: var(--token-typography-font-stack-code);
 }
 strong {
   font-style: inherit;
-  font-weight: var(--typo-weight-bold);
+  @extend %body-200-semibold;
 }
 html {
   text-rendering: optimizeLegibility;

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

@@ -3,81 +3,73 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+%display-500-bold {
+  @extend .hds-typography-display-500;
+  @extend .hds-font-weight-bold;
+}
+%display-400-bold {
+  @extend .hds-typography-display-400;
+  @extend .hds-font-weight-bold;
+}
+%display-400-semibold {
+  @extend .hds-typography-display-400;
+  @extend .hds-font-weight-semibold;
+}
+%display-400-medium {
+  @extend .hds-typography-display-400;
+  @extend .hds-font-weight-medium;
+}
+%display-300-bold {
+  @extend .hds-typography-display-300;
+  @extend .hds-font-weight-bold;
+}
+%display-300-semibold {
+  @extend .hds-typography-display-300;
+  @extend .hds-font-weight-semibold;
+}
+%display-300-medium {
+  @extend .hds-typography-display-300;
+  @extend .hds-font-weight-medium;
+}
+%display-200-semibold {
+  @extend .hds-typography-display-200;
+  @extend .hds-font-weight-semibold;
+}
+%display-100-medium {
+  @extend .hds-typography-display-100;
+  @extend .hds-font-weight-medium;
+}
+%display-100-semibold {
+  @extend .hds-typography-display-100;
+  @extend .hds-font-weight-semibold;
+}
+
+$sizes: 100, 200, 300;
+@each $size in $sizes {
+  %body-#{$size}-regular {
+    @extend .hds-typography-body-#{$size};
+    @extend .hds-font-weight-regular;
+  }
+  %body-#{$size}-medium {
+    @extend .hds-typography-body-#{$size};
+    @extend .hds-font-weight-medium;
+  }
+  %body-#{$size}-semibold {
+    @extend .hds-typography-body-#{$size};
+    @extend .hds-font-weight-semibold;
+  }
+
+  %code-#{$size}-regular {
+    font-family: var(--token-typography-font-stack-code);
+    font-size: var(--token-typography-code-#{$size}-font-size);
+    line-height: var(--token-typography-code-#{$size}-line-height);
+    font-weight: var(--token-typography-font-weight-regular);
+  }
+}
+
 %typo-inherit {
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   font-style: inherit;
 }
-%typo-body {
-  font-size: var(--typo-size-600);
-  font-family: var(--typo-family-sans);
-  line-height: var(--typo-lead-700);
-}
-%typo-header {
-  line-height: var(--typo-lead-200);
-}
-%h000,
-%h100,
-%h200,
-%h300,
-%h400,
-%h500,
-%h600,
-%h400,
-%h500,
-%h600 {
-  @extend %typo-header;
-}
-%h100 {
-  font-weight: var(--typo-weight-bold);
-}
-%h200,
-%h300,
-%h400 {
-  font-weight: var(--typo-weight-semibold);
-}
-%h500,
-%h600 {
-  font-weight: var(--typo-weight-medium);
-}
-%h000 {
-  font-size: var(--typo-size-100);
-}
-%h100 {
-  font-size: var(--typo-size-200);
-}
-%h200 {
-  font-size: var(--typo-size-300);
-}
-%h300 {
-  font-size: var(--typo-size-500);
-}
-/*p1 strong, differing weights */
-%h400,
-%h500 {
-  font-size: var(--typo-size-600);
-}
-/*p2 strong */
-%h600 {
-  font-size: var(--typo-size-700);
-}
-%typo-p {
-  line-height: inherit;
-  font-size: inherit;
-}
-%p,
-%p1,
-%p2,
-%p3 {
-  @extend %typo-p;
-}
-%p1 {
-  font-size: var(--typo-size-600);
-}
-%p2 {
-  font-size: var(--typo-size-700);
-}
-%p3 {
-  font-size: var(--typo-size-800);
-}

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

@@ -1,52 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-:root {
-  /* families */
-  /* -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
-  --typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  --typo-family-mono: monospace;
-
-  /* sizes */
-  /* --typo-size-inherit: inherit; worthwhile? */
-  --typo-size-000: 16px;
-  /* TODO: Numbering of these should possibly be reversed, more likely to add bigger*/
-  /* also maybe use 100, 200 etc like colors */
-  --typo-size-100: 3.5rem;
-  --typo-size-200: 1.8rem;
-  --typo-size-250: 1.750rem; /* 28px */
-  --typo-size-300: 1.3rem;
-  /* mktg only ^ */
-  --typo-size-400: 1.2rem; /* $size-large? 24 */
-  --typo-size-450: 1.125rem;
-  --typo-size-500: 1rem; /* $size-medium? // 18 */
-  --typo-size-600: 0.875rem; /* $size-normal? // 14 */
-  --typo-size-700: 0.8125rem; /* $size-small? // 13 */
-  --typo-size-800: 0.75rem; /* $size-small? // 12 */
-
-  /* weights */
-  --typo-weight-light: 300;
-  --typo-weight-normal: 400;
-  --typo-weight-medium: 500;
-  --typo-weight-semibold: 600;
-  --typo-weight-bold: 700;
-
-  /* line-heights. lead/leading is easier to write */
-  /* is this worthwhile? Should we use font-size relative?*/
-  /* DS uses ~ 1.3 */
-  --typo-lead-000: 0;
-  --typo-lead-050: 1;
-  --typo-lead-100: 1.2;
-  --typo-lead-200: 1.25;
-  --typo-lead-300: 1.28;
-  --typo-lead-500: 1.33;
-  --typo-lead-600: 1.4;
-  --typo-lead-700: 1.5;
-  --typo-lead-800: 1.7;
-
-  /* letter-spacing. kern is easier to write*/
-  /* --typo-kern-000: normal; */
-  /* --typo-kern-100: 1px; */
-}

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

@@ -3,6 +3,5 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-@import './base-variables';
 @import './base-keyframes';
 @import './base-placeholders';

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

@@ -33,7 +33,7 @@
   width: 140px;
 }
 %debug-grid figcaption {
-  @extend %p3;
+  @extend %body-100-regular;
   text-align: center;
 }
 [id^='docfy-demo-preview-color'] ul,
@@ -64,38 +64,36 @@
 }
 
 [id^='docfy-demo-preview-typography'] {
-  .debug-h000 {
+  .debug-h000,
-    @extend %h000;
-  }
   .debug-h100 {
-    @extend %h100;
+    @extend %display-500-bold;
   }
   .debug-h200 {
-    @extend %h200;
+    @extend %display-400-semibold;
   }
   .debug-h300 {
-    @extend %h300;
+    @extend %display-300-semibold;
   }
   .debug-h400 {
-    @extend %h400;
+    @extend %display-100-semibold;
   }
   .debug-h500 {
-    @extend %h500;
+    @extend %display-100-medium;
   }
   .debug-h600 {
-    @extend %h600;
+    @extend %display-100-medium;
   }
   .debug-p {
-    @extend %p;
+    @extend %body-200-regular;
   }
   .debug-p1 {
-    @extend %p1;
+    @extend %body-200-regular;
   }
   .debug-p2 {
-    @extend %p2;
+    @extend %body-100-regular;
   }
   .debug-p3 {
-    @extend %p3;
+    @extend %body-100-regular;
   }
 }
 
@@ -120,7 +118,7 @@ html:not(.with-data-source) .data-source-debug {
 }
 html.with-href-to [href^='console://']::before
 {
-  @extend %p3;
+  @extend %body-100-regular;
   @extend %debug-box;
   content: attr(href);
   display: inline;
@@ -192,25 +190,25 @@ html.with-route-announcer .route-title {
     }
     > h1 {
       padding-top: 20px;
-      @extend %h100;
+      @extend %display-500-bold;
     }
     > h2 {
-      @extend %h200;
+      @extend %display-400-semibold;
     }
     > h3 {
-      @extend %h300;
+      @extend %display-300-semibold;
     }
     > h4 {
-      @extend %h400;
+      @extend %display-100-semibold;
     }
     > p {
-      @extend %p1;
+      @extend %body-200-regular;
     }
     > table {
       margin-bottom: 3em;
     }
     > table td {
-      font-weight: normal !important;
+      font-weight: var(--token-typography-font-weight-regular) !important;
       cursor: default !important;
     }
     > table td code {

ui/packages/consul-ui/app/styles/prism-coldark-cold.scss

@@ -15,7 +15,7 @@ code[class*='language-'],
 pre[class*='language-'] {
   color: #111b27;
   background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: var(--token-typography-font-stack-code);
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -147,7 +147,7 @@ pre[class*='language-'] {
 .token.keyword-this,
 .token.this,
 .token.bold {
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .token.delimiter.important {
@@ -165,7 +165,7 @@ pre[class*='language-'] {
 .language-markdown .token.title,
 .language-markdown .token.title .token.punctuation {
   color: #005a8e;
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .language-markdown .token.blockquote.punctuation {

ui/packages/consul-ui/app/styles/prism-coldark-dark.scss

@@ -15,7 +15,7 @@ code[class*='language-'],
 pre[class*='language-'] {
   color: #e3eaf2;
   background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: var(--token-typography-font-stack-code);
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -147,7 +147,7 @@ pre[class*='language-'] {
 .token.keyword-this,
 .token.this,
 .token.bold {
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .token.delimiter.important {
@@ -165,7 +165,7 @@ pre[class*='language-'] {
 .language-markdown .token.title,
 .language-markdown .token.title .token.punctuation {
   color: #6cb8e6;
-  font-weight: bold;
+  font-weight: var(--token-typography-font-weight-bold);
 }
 
 .language-markdown .token.blockquote.punctuation {

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

@@ -8,7 +8,7 @@ html[data-route^='dc.kv'] .type-toggle {
   margin-bottom: 0 !important;
 }
 html[data-route^='dc.kv.edit'] h2 {
-  @extend %h200;
+  @extend %display-400-semibold;
   border-bottom: var(--decor-border-200);
   border-color: var(--token-color-surface-interactive-active);
   padding-bottom: 0.2em;

ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss

@@ -14,7 +14,7 @@ section[data-route='dc.show.license'] {
 }
 
 %license-route h2 {
-  @extend %h200;
+  @extend %display-400-semibold;
 }
 
 %license-validity p {
@@ -22,7 +22,7 @@ section[data-route='dc.show.license'] {
 }
 %license-validity dl {
   @extend %horizontal-kv-list;
-  font-size: var(--typo-size-400);
+  @extend %body-300-regular;
 }
 %license-validity dl .expired + dd {
   @extend %visually-hidden;
@@ -53,7 +53,7 @@ section[data-route='dc.show.license'] {
   margin-top: 1rem; /* 16px */
 }
 %license-route-learn-more header > :first-child {
-  @extend %h300;
+  @extend %display-300-semibold;
 }
 %license-route-learn-more header {
   margin-bottom: 1rem; /* 16px */

ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss

@@ -20,7 +20,7 @@ section[data-route='dc.show.serverstatus'] {
 
 %serverstatus-route h2,
 %serverstatus-route h3 {
-  @extend %h200;
+  @extend %display-300-semibold;
 }
 
 %server-failure-tolerance {
@@ -45,7 +45,7 @@ section[data-route='dc.show.serverstatus'] {
 
 %server-failure-tolerance header em {
   @extend %pill-200;
-  font-size: 0.812rem; /* 13px */
+  @extend %body-100-regular;
   background-color: var(--token-color-surface-interactive-active);
 
   text-transform: uppercase;
@@ -78,11 +78,11 @@ section[data-route='dc.show.serverstatus'] {
   padding-right: 1.5rem; /* 24px */
 }
 %server-failure-tolerance dt {
-  @extend %p2;
+  @extend %body-100-regular;
   color: var(--token-color-foreground-faint);
 }
 %server-failure-tolerance dd {
-  font-size: var(--typo-size-250);
+  @extend %display-300-semibold;
   color: var(--token-color-hashicorp-brand);
 }
 %server-failure-tolerance header span::before {
@@ -103,7 +103,7 @@ section[data-route='dc.show.serverstatus'] {
 }
 
 %redundancy-zones h3 {
-  @extend %h300;
+  @extend %display-300-semibold;
 }
 %redundancy-zone header {
   display: flow-root;

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

@@ -19,7 +19,7 @@ html[data-route^='dc.services.instance'] .app-view > header dl {
   margin-right: 50px;
 }
 html[data-route^='dc.services.instance'] .app-view > header dt {
-  font-weight: var(--typo-weight-bold);
+  font-weight: var(--token-typography-font-weight-bold);
 }
 html[data-route^='dc.services.instance'] .tab-nav {
   border-top: var(--decor-border-100);
@@ -35,6 +35,6 @@ html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
   padding-bottom: 24px;
 }
 html[data-route^='dc.services.instance.metadata'] .tab-section section h2 {
-  @extend %h300;
+  @extend %display-300-semibold;
   margin: 24px 0 12px 0;
 }

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

@@ -5,79 +5,73 @@
 
 body,
 %form-element-text-input {
-  @extend %typo-body;
+  @extend %body-200-regular;
 }
 %radio-card header,
 fieldset > header,
-%main-nav-horizontal-action,
 %definition-table dt,
 %table caption,
 %tbody-th,
 %form-element > span {
-  @extend %h400;
+  @extend %display-100-semibold;
+}
+%main-nav-horizontal-action {
+  @extend %body-200-medium;
 }
 %definition-table dt {
-  line-height: var(--typo-lead-700);
+  line-height: var(--token-typography-body-300-line-height);
 }
 %internal-button,
 %breadcrumbs li > *,
 %tab-nav {
-  @extend %h500;
+  @extend %body-200-medium;
 }
-%healthcheck-output dt,
+%table td p,
-%table th,
+%table td {
-%table td strong,
+  @extend %body-200-regular;
-%sliding-toggle label span {
+}
-  @extend %h600;
+
+%healthcheck-output dt,
+%table td:first-child p,
+%table td:first-child,
+%sliding-toggle label span {
+  @extend %body-200-semibold;
 }
 
-pre code,
-%notice,
-%notice p,
-%flash-message p,
 %filter-bar input,
 %tab-section p {
-  @extend %p1;
+  @extend %body-200-regular;
 }
 %empty-state-anchor,
-%table td p,
-%table td,
-%healthcheck-output dl > dd,
 %form-element-label,
 %stats-card header a span,
 %footer,
 %app-view h1 span.kind-proxy {
-  @extend %p2;
+  @extend %body-100-regular;
 }
 %empty-state-subheader,
 %empty-state p,
-%button,
 %main-content p,
 %form-element-note,
 %form-element-error > strong {
-  @extend %p3;
+  @extend %body-100-regular;
 }
 %main-content p code {
   @extend %inline-code;
 }
 
 %radio-group label {
-  line-height: var(--typo-lead-200);
+  line-height: var(--token-typography-body-100-line-height);
-}
-%tab-nav {
-  letter-spacing: 0.03em;
 }
 
-/*TODO: See if we can collapse these into a */
-/* strong %p3 */
 %form-element-label,
 %button {
-  font-weight: var(--typo-weight-semibold);
+  @extend %body-100-semibold;
 }
 %route-card section dt,
 %route-card header:not(.short) dd,
 %splitter-card > header {
-  font-weight: var(--typo-weight-bold);
+  @extend .hds-font-weight-bold;
 }
 /**/
 
@@ -87,9 +81,8 @@ pre code,
 %pill,
 %form-element > strong,
 %tbody-th em,
-%app-view h1 em,
 %route-card header dt {
-  font-weight: var(--typo-weight-normal);
+  @extend .hds-font-weight-regular;
 }
 
 %form-element-note,
@@ -101,8 +94,7 @@ pre code,
 
 /* composite row */
 %composite-row-header {
-  font-size: var(--typo-size-450);
+  @extend %display-300-medium;
-  font-weight: var(--typo-weight-medium);
 }
 %composite-row-header *:not(button) {
   font-size: inherit;
@@ -110,14 +102,31 @@ pre code,
 }
 /**/
 
-/* 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: var(--typo-size-500);
+  @extend %body-200-medium;
 }
 /*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;
+    font-size: var(--token-typography-body-300-font-size) !important;
   }
 }
+%healthcheck-output dl > dd {
+  @extend %body-200-regular;
+}
+
+h1 {
+  @extend %display-500-bold;
+}
+
+%healthcheck-output pre code,
+pre code,
+pre,
+code {
+  @extend %code-200-regular;
+}
+
+dd code,
+dd pre code {
+  @extend %code-100-regular;
+}

ui/packages/consul-ui/app/templates/dc/show/license.hbs

@@ -120,16 +120,19 @@ as |item|}}
                 @text={{compute (fn route.t 'documentation.links.license-expiration.text')}}
                 @href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.license-expiration.link'))}}'
                 @icon='docs-link'
+                @iconPosition='trailing'
               />
               <Hds::Link::Standalone
                 @text={{compute (fn route.t 'documentation.links.renewing-license.text')}}
                 @href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.renewing-license.link'))}}'
                 @icon='docs-link'
+                @iconPosition='trailing'
               />
               <Hds::Link::Standalone
                 @text={{compute (fn route.t 'documentation.links.applying-new-license.text')}}
                 @href='{{concat (env 'CONSUL_DOCS_URL') (compute (fn route.t 'documentation.links.applying-new-license.link'))}}'
                 @icon='docs-link'
+                @iconPosition='trailing'
               />
             </div>
           </aside>

ui/packages/consul-ui/blueprints/route-test/index.js

@@ -2,4 +2,3 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-

ui/packages/consul-ui/lib/commands/bin/list.js

@@ -4,5 +4,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-
 require('../lib/list.js')(`${process.cwd()}/tests/steps.js`);