From c873ae68bc12fcf9b978a28b7b5d74b2a8d9d24e Mon Sep 17 00:00:00 2001 From: Ben Rohlfs Date: Tue, 18 Feb 2020 13:41:54 +0100 Subject: [PATCH] Change to Open Sans as the font for all headers Use 18px Open Sans with weight 400 instead of 16px Roboto with 500 weight. Change-Id: Ib5eccb36c252b78ccd8c87443d930cf9658c7f24 --- .../gr-create-change-help/gr-create-change-help.html | 1 + .../elements/change/gr-change-view/gr-change-view.html | 5 ++--- .../gr-included-in-dialog/gr-included-in-dialog.html | 1 + .../app/elements/core/gr-main-header/gr-main-header.html | 1 + .../app/elements/diff/gr-diff-view/gr-diff-view.html | 2 ++ .../app/elements/edit/gr-editor-view/gr-editor-view.html | 2 ++ polygerrit-ui/app/elements/gr-app-element.html | 1 + polygerrit-ui/app/styles/gr-change-list-styles.html | 1 + .../styles/gr-change-view-integration-shared-styles.html | 1 + polygerrit-ui/app/styles/gr-table-styles.html | 1 + polygerrit-ui/app/styles/shared-styles.html | 3 +++ polygerrit-ui/app/styles/themes/app-theme.html | 9 +++++---- 12 files changed, 21 insertions(+), 7 deletions(-) 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 0c74bb58dc..842c402480 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 @@ -55,6 +55,7 @@ limitations under the License. vertical-align: top; } #help h1 { + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); 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 f89b9e992e..955a8c585f 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 @@ -91,6 +91,7 @@ limitations under the License. align-items: center; display: flex; flex: 1; + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); @@ -98,9 +99,6 @@ limitations under the License. .changeNumberColon { color: transparent; } - .headerTitle .headerSubject { - font-weight: var(--font-weight-bold); - } #replyBtn { margin-bottom: var(--spacing-l); } @@ -300,6 +298,7 @@ limitations under the License. } .headerTitle { flex-wrap: wrap; + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); 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 5f3196bef7..075b41e597 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 @@ -43,6 +43,7 @@ limitations under the License. } #title { display: inline-block; + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); 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 4dce19ad3e..51717a8975 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 @@ -160,6 +160,7 @@ limitations under the License. } @media screen and (max-width: 50em) { .bigTitle { + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); 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 f61905e7c4..9e381189f1 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 @@ -113,6 +113,7 @@ limitations under the License. } .loading { color: var(--deemphasized-text-color); + font-family: var(--header-font-family); font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); @@ -196,6 +197,7 @@ limitations under the License. } .mobileNavLink { color: var(--primary-text-color); + font-family: var(--header-font-family); font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); 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 d955391c17..7a1294dd07 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 @@ -51,6 +51,7 @@ limitations under the License. padding: var(--spacing-m) var(--spacing-l); } header gr-editable-label { + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); @@ -74,6 +75,7 @@ limitations under the License. .controlGroup { align-items: center; display: flex; + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); diff --git a/polygerrit-ui/app/elements/gr-app-element.html b/polygerrit-ui/app/elements/gr-app-element.html index 07564cc863..0b967060be 100644 --- a/polygerrit-ui/app/elements/gr-app-element.html +++ b/polygerrit-ui/app/elements/gr-app-element.html @@ -112,6 +112,7 @@ limitations under the License. margin-top: var(--spacing-m); } .errorText { + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html index 4f95d0946f..2c6f6795f4 100644 --- a/polygerrit-ui/app/styles/gr-change-list-styles.html +++ b/polygerrit-ui/app/styles/gr-change-list-styles.html @@ -162,6 +162,7 @@ limitations under the License. } @media only screen and (max-width: 50em) { :host { + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); 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 7550d9631f..8b26c95a1f 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,6 +41,7 @@ limitations under the License. border-bottom: 1px solid var(--border-color); } .header .label { + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); diff --git a/polygerrit-ui/app/styles/gr-table-styles.html b/polygerrit-ui/app/styles/gr-table-styles.html index 072bc309a3..54a73feeca 100644 --- a/polygerrit-ui/app/styles/gr-table-styles.html +++ b/polygerrit-ui/app/styles/gr-table-styles.html @@ -78,6 +78,7 @@ limitations under the License. } .genericList .groupHeader { background-color: var(--table-subheader-background-color); + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html index d1b6e22c39..2b9bdab3d9 100644 --- a/polygerrit-ui/app/styles/shared-styles.html +++ b/polygerrit-ui/app/styles/shared-styles.html @@ -102,16 +102,19 @@ limitations under the License. line-height: var(--line-height-small); } h1, .font-h1 { + font-family: var(--header-font-family); font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); } h2, .font-h2 { + font-family: var(--header-font-family); font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); } h3, .font-h3 { + font-family: var(--header-font-family); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html index 0cedd2848b..02defc0aeb 100644 --- a/polygerrit-ui/app/styles/themes/app-theme.html +++ b/polygerrit-ui/app/styles/themes/app-theme.html @@ -81,12 +81,13 @@ html { /* fonts */ --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --header-font-family: 'Open Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --monospace-font-family: 'Roboto Mono', 'SF Mono', 'Lucida Console', Monaco, monospace; --font-size-code: 12px; /* 12px mono */ --font-size-mono: .929rem; /* 13px mono */ --font-size-small: .857rem; /* 12px */ --font-size-normal: 1rem; /* 14px */ - --font-size-h3: 1.143rem; /* 16px */ + --font-size-h3: 1.286rem; /* 18px */ --font-size-h2: 1.429rem; /* 20px */ --font-size-h1: 1.714rem; /* 24px */ --line-height-code: 1.334; /* 16px */ @@ -98,9 +99,9 @@ html { --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; + --font-weight-h1: 400; + --font-weight-h2: 400; + --font-weight-h3: 400; /* spacing */ --spacing-xxs: 1px;