ui: Use base fonts throughout the app (#6881)

We've had a set of %placeholders in our base styles for quite a while
but not butten the bullet to use them. This begins to use them.

We had to make a small amount of tweaks to base whilst doing this, but
its as we'd prefer there to be as few font placeholders as possible. We
might/should be able to reduce these further at somepoint, or
potentially rename them. We currently have six header fonts (or 4 header
fonts/2 strong body fonts) and 3 body fonts.

We also noticed an empty CSS file and deleted that while we were here.
We also noticed that the bottom border of structure tabs was a pixel
larger than ours so we tweaked that here also.

ui-v2/app/styles/app.scss

@@ -1,7 +1,7 @@
 @charset 'utf-8';
 
-@import 'base/index';
 @import 'base/reset/index';
+@import 'base/index';
 @import 'variables/index';
 
 /*TODO: Move this to its own local component*/
@@ -23,4 +23,3 @@
 @import 'routes/dc/kv/index';
 @import 'routes/dc/acls/index';
 @import 'routes/dc/acls/tokens/index';
-@import 'routes/dc/acls/policies/index';

ui-v2/app/styles/base/components/buttons/layout.scss

@@ -24,19 +24,15 @@
   text-align: center;
   justify-content: center;
   align-items: center;
-  padding: calc(0.375em - 1px) calc(2.2em - 1px);
+  padding: calc(0.5em - 1px) calc(2.2em - 1px);
-  height: 2.55em;
   min-width: 100px;
 }
 %button:not(:last-child) {
   margin-right: 8px;
 }
 %button-compact {
-  /* @extend %button;*/
+  padding-top: calc(0.4em - 1px) !important;
-  padding-left: calc(1.6em - 1px) !important;
+  padding-bottom: calc(0.4em - 1px) !important;
-  padding-right: calc(1.6em - 1px) !important;
-  padding-top: calc(0.35em - 1px) !important;
-  height: 2.3em !important;
 }
 %internal-button {
   padding: 0.75rem 1rem;

ui-v2/app/styles/base/components/pill/layout.scss

@@ -6,7 +6,8 @@
 }
 %pill button {
   padding: 0;
-  height: 10px;
+  width: 9px;
-  margin-right: 3px;
+  height: 9px;
+  margin-right: 4px;
   font-size: 0;
 }

ui-v2/app/styles/base/components/tabs/skin.scss

@@ -1,6 +1,7 @@
 %tab-nav {
   /* %frame-gray-something */
   border-bottom: $decor-border-100;
+  /* TODO: structure tabs don't actually have a top border */
   border-top: $decor-border-200;
 }
 %tab-nav {
@@ -18,7 +19,7 @@
   text-decoration: none;
 }
 %tab-button {
-  border-bottom: $decor-border-200;
+  border-bottom: $decor-border-300;
 }
 %tab-button {
   border-color: $color-transparent;

ui-v2/app/styles/base/components/tooltip/layout.scss

@@ -15,9 +15,6 @@
   white-space: nowrap;
   content: attr(data-tooltip);
   text-indent: 0;
-  /* TODO: should this be hardcoded here ? */
-  font-size: 14px;
-  /* structure */
   min-width: 192px;
 }
 %tooltip-bubble {

ui-v2/app/styles/base/components/tooltip/skin.scss

@@ -19,7 +19,6 @@
   border-bottom: 18px solid $gray-500;
 }
 %tooltip-bubble {
-  font-weight: normal;
   border-radius: $decor-radius-200;
   /* this isn't quite like the values in structure */
   /* but this looks closer visually */

ui-v2/app/styles/base/reset/index.scss

@@ -1,3 +1,6 @@
 @import './base-variables';
+@import '../color/base-variables';
+@import '../color/semantic-variables';
+@import '../typography/base-variables';
 @import './system';
 @import './minireset';

ui-v2/app/styles/base/typography/base-placeholders.scss

@@ -18,9 +18,14 @@
   font-weight: $typo-weight-bold;
 }
 %h2,
-%h3 {
+%h3,
+%h4 {
   font-weight: $typo-weight-semibold;
 }
+%h5,
+%h6 {
+  font-weight: $typo-weight-medium;
+}
 %h1 {
   font-size: $typo-size-100;
 }
@@ -30,6 +35,15 @@
 %h3 {
   font-size: $typo-size-300;
 }
+/*p1 strong, differing weights */
+%h4,
+%h5 {
+  font-size: $typo-size-600;
+}
+/*p2 strong */
+%h6 {
+  font-size: $typo-size-700;
+}
 %typo-p {
   line-height: inherit;
   font-size: inherit;

ui-v2/app/styles/components/app-view.scss

@@ -19,6 +19,9 @@ main {
   }
 }
 // TODO: This should be its own component
+%app-view h1 {
+  padding-bottom: 0.2em;
+}
 %app-view h1 span[data-tooltip] {
   @extend %with-external-source-icon;
   margin-top: 13px;

ui-v2/app/styles/components/app-view/layout.scss

@@ -29,7 +29,7 @@
 }
 %app-view h2 {
   padding-bottom: 0.2em;
-  margin-bottom: 0.2em;
+  margin-bottom: 0.5em;
 }
 %app-view-header .actions > *:not(:last-child) {
   margin-right: 12px;

ui-v2/app/styles/components/confirmation-dialog/layout.scss

@@ -4,12 +4,9 @@
 %confirmation-dialog-inline p {
   margin-right: 12px;
   padding-left: 12px;
-  padding-top: 5px;
+  margin-bottom: 0 !important;
-  padding-bottom: 5px;
-  margin-bottom: 0;
 }
 %confirmation-dialog-inline {
   display: flex;
   align-items: center;
-  line-height: 1;
 }

ui-v2/app/styles/core/layout.scss

@@ -40,7 +40,10 @@ html.template-edit main {
     padding: 0;
   }
 }
-/* TODO: keep margin below forms, move elsewhere */
+%main-content p:not(:last-child) {
+  margin-bottom: 1em;
+}
+/* TODO: keep margin below forms, move elsewhere? */
 %main-content form,
 %main-content form + div .with-confirmation {
   margin-bottom: 2em;

ui-v2/app/styles/core/typography.scss

@@ -1,131 +1,95 @@
-%button {
+body,
-  font-family: $typo-family-sans;
+%form-element-textarea {
+  @extend %typo-body;
 }
-main p:not(:last-child),
+h1 {
-%modal-window p:not(:last-child) {
+  @extend %h1;
-  margin-bottom: 1em;
+  font-size: $typo-header-100;
 }
+h2 {
+  @extend %h2;
+  font-size: $typo-header-200;
+}
+h3 {
+  @extend %h3;
+  font-size: $typo-header-300;
+}
+fieldset > header,
+%header-nav,
+%app-view-content div > dl > dt,
+%table caption,
+%tbody-th,
+%form-element > span {
+  @extend %h4;
+}
+%internal-button,
+%breadcrumbs li > *,
+%tab-nav {
+  @extend %h5;
+}
+%healthcheck-output dt,
+%table th,
+%table td strong,
+%tooltip-bubble,
+%sliding-toggle label span {
+  @extend %h6;
+}
+
+pre code,
+%notice,
+%notice p,
+%filter-bar input,
+%phrase-editor input {
+  @extend %p1;
+}
+.type-dialog,
+%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;
+}
+.template-error > div,
 %button,
-%form-element textarea,
+%main-content p,
-%form-element [type='text'],
+%app-view > div.disabled > div,
-%form-element [type='password'] {
+%form-element-note,
-  line-height: 1.5;
+%form-element-error > strong {
+  @extend %p3;
 }
-h3,
+
+%button {
+  font-weight: $typo-weight-semibold;
+}
+
 %radio-group label {
-  line-height: 1.25;
+  line-height: $typo-lead-200;
-}
-%filter-bar [role='radiogroup'] label {
-  line-height: 1.7;
 }
 %header-nav,
 %tab-nav {
   letter-spacing: 0.03em;
 }
-%footer {
-  letter-spacing: -0.05em;
-}
-
-%button,
-%internal-button {
-  font-family: $typo-family-sans;
-}
-/* Weighting */
-h1,
-%app-view-content div > dt,
 %header-drop-nav .is-active {
   font-weight: $typo-weight-bold;
 }
-h2,
+%main-content label a[rel*='help'],
-h3,
-fieldset > header,
-caption,
-%header-nav,
-%healthcheck-output dt,
-%copy-button,
-%app-view-content div > dl > dt,
-%tbody-th,
-%form-element > span,
-%toggle label span {
-  font-weight: $typo-weight-semibold;
-}
-%button {
-  font-weight: $typo-weight-semibold !important;
-}
-main label a[rel*='help'],
 %pill,
-%tbody-th em,
 %form-element > strong,
+%tbody-th em,
 %app-view h1 em {
   font-weight: $typo-weight-normal;
 }
-th,
-td strong,
-%breadcrumbs li > *,
-%action-group-action,
-%tab-nav,
-%tooltip-bubble {
-  font-weight: $typo-weight-medium;
-}
 
-/* Styling */
 %form-element > em,
 %tbody-th em,
 %app-view h1 em {
   font-style: normal;
 }
 
-/* Sizing */
-%footer > * {
-  font-size: inherit;
-}
-
-h1 {
-  font-size: $typo-header-100;
-}
-h2 {
-  font-size: $typo-header-200;
-}
-h3 {
-  font-size: $typo-header-300;
-}
 %header-drop-nav .is-active,
 %app-view h1 em {
   font-size: $typo-size-500;
 }
-body,
-pre code,
-input,
-textarea,
-%internal-button,
-%action-group-action,
-%tbody-th {
-  font-size: $typo-size-600;
-}
-th,
-td,
-caption,
-.type-dialog,
-%healthcheck-output dl > *,
-%form-element > span,
-%tooltip-bubble,
-%stats-card header a span,
-%footer,
-%app-view h1 span.kind-proxy {
-  font-size: $typo-size-700;
-}
-%toggle label span {
-  font-size: $typo-size-700 !important;
-}
-fieldset > p,
-.template-error > div,
-[role='tabpanel'] > p:only-child,
-.with-confirmation p,
-%app-view-content > p:only-child,
-%app-view > div.disabled > div,
-%button,
-%form-element > em,
-%form-element > strong,
-%feedback-dialog-inline p {
-  font-size: $typo-size-800;
-}

ui-v2/app/styles/routes/dc/acls/index.scss

@@ -10,7 +10,7 @@ td a.is-management::after {
   .template-policy.template-list main header .actions,
   .template-token.template-list main header .actions {
     position: relative;
-    top: 45px;
+    top: 42px;
   }
 }