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.
This commit is contained in:
John Cowen 2019-12-12 09:25:39 +00:00 committed by John Cowen
parent 572e3891fe
commit 1b5658d5ac
15 changed files with 103 additions and 126 deletions

View File

@ -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';

View File

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

View File

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

View File

@ -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;

View File

@ -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 {

View File

@ -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 */

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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;

View File

@ -1,131 +1,95 @@
%button {
font-family: $typo-family-sans;
body,
%form-element-textarea {
@extend %typo-body;
}
main p:not(:last-child),
%modal-window p:not(:last-child) {
margin-bottom: 1em;
h1 {
@extend %h1;
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,
%form-element [type='text'],
%form-element [type='password'] {
line-height: 1.5;
%main-content p,
%app-view > div.disabled > div,
%form-element-note,
%form-element-error > strong {
@extend %p3;
}
h3,
%button {
font-weight: $typo-weight-semibold;
}
%radio-group label {
line-height: 1.25;
}
%filter-bar [role='radiogroup'] label {
line-height: 1.7;
line-height: $typo-lead-200;
}
%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,
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'],
%main-content 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;
}

View File

@ -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;
}
}