From 04e1ae873914e9b0f386f334fafd7542bb8a26ca Mon Sep 17 00:00:00 2001 From: Ben Rohlfs Date: Sun, 20 Oct 2019 22:25:38 +0200 Subject: [PATCH] Add css vars for line-height Also remove shady usages of line-height. Change-Id: I7e95d7cc1a44cf202e9c999215dcf5ef6b70520a --- .../admin/gr-repo-detail-list/gr-repo-detail-list.html | 1 - .../diff/gr-syntax-themes/gr-syntax-theme.html | 1 - .../shared/gr-account-chip/gr-account-chip.html | 2 +- .../shared/gr-dropdown-list/gr-dropdown-list.html | 10 ---------- .../elements/shared/gr-linked-chip/gr-linked-chip.html | 2 +- polygerrit-ui/app/styles/main.css | 3 ++- polygerrit-ui/app/styles/shared-styles.html | 6 +++--- polygerrit-ui/app/styles/themes/app-theme.html | 7 ++++++- 8 files changed, 13 insertions(+), 19 deletions(-) diff --git a/polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list.html b/polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list.html index 70faac914d..2f244f83f4 100644 --- a/polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list.html +++ b/polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list.html @@ -73,7 +73,6 @@ limitations under the License. .canEdit .revisionEdit{ align-items: center; display: flex; - line-height: 1; } .deleteButton:not(.show) { display: none; diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html index a122113166..c9f8eb3799 100644 --- a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html +++ b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html @@ -41,7 +41,6 @@ limitations under the License. .gr-syntax-keyword, .gr-syntax-name { color: var(--syntax-keyword-color); - line-height: 1; } .gr-syntax-number { color: var(--syntax-number-color); diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html index 1975f7a887..5a095a4142 100644 --- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html +++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html @@ -46,7 +46,7 @@ limitations under the License. color: var(--deemphasized-text-color); font-weight: normal; height: .6em; - line-height: .6; + line-height: 10px; margin-left: var(--spacing-xs); padding: 0; text-decoration: none; diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html index 9d1d7763f3..cdf9fce75f 100644 --- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html +++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html @@ -78,20 +78,10 @@ limitations under the License. } .bottomContent { color: var(--deemphasized-text-color); - /* - * Should be 16px when the base font size is 13px (browser default of - * 16px. - */ - line-height: 1.37rem; } .bottomContent, .topContent { display: flex; - /* - * Should be 16px when the base font size is 13px (browser default of - * 16px. - */ - line-height: 1.37rem; justify-content: space-between; flex-direction: row; width: 100%; diff --git a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html index 59e47a0bb3..f3e0906416 100644 --- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html +++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html @@ -43,7 +43,7 @@ limitations under the License. color: var(--deemphasized-text-color); font-weight: normal; height: .6em; - line-height: .6; + line-height: 10px; margin-left: var(--spacing-xs); padding: 0; text-decoration: none; diff --git a/polygerrit-ui/app/styles/main.css b/polygerrit-ui/app/styles/main.css index 618a2d7128..61518506fa 100644 --- a/polygerrit-ui/app/styles/main.css +++ b/polygerrit-ui/app/styles/main.css @@ -43,5 +43,6 @@ body { */ -webkit-text-size-adjust: none; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - line-height: 1.4; + font-size: var(--font-size-normal, 1rem); + line-height: var(--line-height-normal, 1.4); } diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html index bc9873db8b..937f2ee173 100644 --- a/polygerrit-ui/app/styles/shared-styles.html +++ b/polygerrit-ui/app/styles/shared-styles.html @@ -55,9 +55,6 @@ limitations under the License. button { font: inherit; } - body { - line-height: 1; - } ol, ul { list-style: none; } @@ -77,14 +74,17 @@ limitations under the License. h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); + line-height: var(--line-height-h1); } h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); + line-height: var(--line-height-h2); } h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); + line-height: var(--line-height-h3); } iron-icon { color: var(--deemphasized-text-color); diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html index 6cc15aa41d..21dc0bff59 100644 --- a/polygerrit-ui/app/styles/themes/app-theme.html +++ b/polygerrit-ui/app/styles/themes/app-theme.html @@ -74,11 +74,16 @@ html { /* fonts */ --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - --font-size-normal: 1rem; /* 13px */ --font-size-small: .92rem; /* 12px */ + --font-size-normal: 1rem; /* 13px */ --font-size-h3: 1.154rem; /* 15px */ --font-size-h2: 1.5rem; /* 19.5px */ --font-size-h1: 2rem; /* 26px */ + --line-height-small: 1.4; /* 16.8px */ + --line-height-normal: 1.4; /* 18.2px */ + --line-height-h3: 1.4; /* 21.0px */ + --line-height-h2: 1.4; /* 27.3px */ + --line-height-h1: 1.4; /* 36.4px */ /* Used on text for change list that needs user's attention. */ --font-weight-bold: 500; --monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;