Never use header font-size without weight and line-height
Add specific weight vars for h1, h2, h3.
Change-Id: Icd6ab409b2f4d4519e23eb5b4f648bac8c2a8b50
diff --git a/polygerrit-ui/app/elements/change-list/gr-create-change-help/gr-create-change-help.html b/polygerrit-ui/app/elements/change-list/gr-create-change-help/gr-create-change-help.html
index e88368d..0c74bb5 100644
--- a/polygerrit-ui/app/elements/change-list/gr-create-change-help/gr-create-change-help.html
+++ b/polygerrit-ui/app/elements/change-list/gr-create-change-help/gr-create-change-help.html
@@ -56,6 +56,8 @@
}
#help h1 {
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
#help p {
margin-bottom: var(--spacing-m);
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 57212de..f89b9e9 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -92,6 +92,8 @@
display: flex;
flex: 1;
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
.changeNumberColon {
color: transparent;
@@ -299,6 +301,8 @@
.headerTitle {
flex-wrap: wrap;
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
.desktop {
display: none;
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
index 7a6aa7f..5f3196b 100644
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
@@ -44,6 +44,8 @@
#title {
display: inline-block;
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
margin-top: var(--spacing-xs);
}
#filterInput {
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index c438047..4dce19a 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -161,7 +161,8 @@
@media screen and (max-width: 50em) {
.bigTitle {
font-size: var(--font-size-h3);
- font-weight: var(--font-weight-bold);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
gr-smart-search,
.browse,
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index 06c72bd..f61905e 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -114,6 +114,8 @@
.loading {
color: var(--deemphasized-text-color);
font-size: var(--font-size-h1);
+ font-weight: var(--font-weight-h1);
+ line-height: var(--line-height-h1);
height: 100%;
padding: var(--spacing-l);
text-align: center;
@@ -195,7 +197,8 @@
.mobileNavLink {
color: var(--primary-text-color);
font-size: var(--font-size-h2);
- font-weight: var(--font-weight-bold);
+ font-weight: var(--font-weight-h2);
+ line-height: var(--line-height-h2);
text-decoration: none;
}
.mobileNavLink:not([href]) {
diff --git a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
index 6598772..d955391 100644
--- a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
+++ b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
@@ -52,6 +52,8 @@
}
header gr-editable-label {
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
--label-style: {
text-overflow: initial;
white-space: initial;
@@ -73,6 +75,8 @@
align-items: center;
display: flex;
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
.rightControls {
justify-content: flex-end;
diff --git a/polygerrit-ui/app/elements/gr-app-element.html b/polygerrit-ui/app/elements/gr-app-element.html
index 6c334b5..07564cc 100644
--- a/polygerrit-ui/app/elements/gr-app-element.html
+++ b/polygerrit-ui/app/elements/gr-app-element.html
@@ -113,6 +113,8 @@
}
.errorText {
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
.errorMoreInfo {
color: var(--deemphasized-text-color);
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index 345363b..4f95d09 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -163,6 +163,8 @@
@media only screen and (max-width: 50em) {
:host {
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
gr-change-list-item {
flex-wrap: wrap;
diff --git a/polygerrit-ui/app/styles/gr-change-view-integration-shared-styles.html b/polygerrit-ui/app/styles/gr-change-view-integration-shared-styles.html
index 76e978c..7550d96 100644
--- a/polygerrit-ui/app/styles/gr-change-view-integration-shared-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-view-integration-shared-styles.html
@@ -41,8 +41,9 @@
border-bottom: 1px solid var(--border-color);
}
.header .label {
- font-weight: var(--font-weight-bold);
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
margin: 0 var(--spacing-l) 0 0;
}
.header .note {
diff --git a/polygerrit-ui/app/styles/gr-table-styles.html b/polygerrit-ui/app/styles/gr-table-styles.html
index d4e4bcf..072bc30 100644
--- a/polygerrit-ui/app/styles/gr-table-styles.html
+++ b/polygerrit-ui/app/styles/gr-table-styles.html
@@ -79,6 +79,8 @@
.genericList .groupHeader {
background-color: var(--table-subheader-background-color);
font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
}
.genericList a {
color: var(--primary-text-color);
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html
index ce6bead..d1b6e22 100644
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -103,17 +103,17 @@
}
h1, .font-h1 {
font-size: var(--font-size-h1);
- font-weight: var(--font-weight-bold);
+ font-weight: var(--font-weight-h1);
line-height: var(--line-height-h1);
}
h2, .font-h2 {
font-size: var(--font-size-h2);
- font-weight: var(--font-weight-bold);
+ font-weight: var(--font-weight-h2);
line-height: var(--line-height-h2);
}
h3, .font-h3 {
font-size: var(--font-size-h3);
- font-weight: var(--font-weight-bold);
+ font-weight: var(--font-weight-h3);
line-height: var(--line-height-h3);
}
iron-icon {
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index b6b889f..0cedd28 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -98,6 +98,9 @@
--line-height-h1: 2.286rem; /* 32px */
--font-weight-normal: 400; /* 400 is the same as 'normal' */
--font-weight-bold: 500;
+ --font-weight-h1: 500;
+ --font-weight-h2: 500;
+ --font-weight-h3: 500;
/* spacing */
--spacing-xxs: 1px;
