From d337dbfa5d1eb8915561c6b561d19363a544c0cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Kone=C4=8Dn=C3=BD?= Date: Fri, 24 Feb 2023 14:26:44 +0100 Subject: [PATCH] :recycle: Connect line-heigh values to variables and set scale MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Ondřej Konečný --- frontend/resources/styles/common/base.scss | 20 +++++++++---------- .../styles/common/dependencies/fonts.scss | 20 +++++++++++++++---- .../styles/common/dependencies/reset.scss | 4 ++-- .../resources/styles/common/framework.scss | 2 +- .../styles/main/layouts/not-found.scss | 2 +- .../main/partials/af-signup-questions.scss | 2 +- .../styles/main/partials/comments.scss | 2 +- .../styles/main/partials/dashboard-grid.scss | 2 +- .../main/partials/dashboard-settings.scss | 2 +- .../styles/main/partials/dashboard.scss | 18 ++++++++--------- .../styles/main/partials/exception-page.scss | 2 +- .../resources/styles/main/partials/forms.scss | 2 +- .../resources/styles/main/partials/modal.scss | 4 ++-- .../partials/sidebar-element-options.scss | 2 +- .../styles/main/partials/sidebar-layers.scss | 2 +- .../styles/main/partials/sidebar.scss | 2 +- .../styles/main/partials/user-settings.scss | 2 +- .../styles/main/partials/workspace.scss | 2 +- 18 files changed, 52 insertions(+), 40 deletions(-) diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index f26095188..ca0454f67 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -70,19 +70,19 @@ button { p { font-size: $fs12; margin-bottom: 1rem; - line-height: $base-lh-sm; + line-height: $lh-133; @include bp(baby-bear) { font-size: $fs16; - line-height: $base-lh; + line-height: $lh-143; } } li { - line-height: $base-lh-sm; + line-height: $lh-133; @include bp(baby-bear) { - line-height: $base-lh; + line-height: $lh-143; } } @@ -101,32 +101,32 @@ strong { h1 { font-size: $fs34; font-weight: $fw500; - line-height: $title-lh-sm; + line-height: $lh-115; @include bp(baby-bear) { font-size: $fs38; - line-height: $title-lh; + line-height: $lh-125; } &.supertitle { font-size: $fs44; font-weight: $fw300; - line-height: $title-lh-sm; + line-height: $lh-115; @include bp(baby-bear) { font-size: $fs44; - line-height: $title-lh; + line-height: $lh-125; } } } h2 { font-size: $fs24; font-weight: $fw300; - line-height: $title-lh-sm; + line-height: $lh-115; @include bp(baby-bear) { font-size: $fs32; - line-height: $title-lh; + line-height: $lh-125; } } diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss index f8022583d..74cd11499 100644 --- a/frontend/resources/styles/common/dependencies/fonts.scss +++ b/frontend/resources/styles/common/dependencies/fonts.scss @@ -46,10 +46,22 @@ $fw800: 800; // Extra Bold $fw900: 900; // Black // Line height -$base-lh: 1.43; -$base-lh-sm: 1.33; -$title-lh: 1.25; -$title-lh-sm: 1.15; +// Value are predefined as unitless (ratio to font size in %), because that is the best approach for browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values +$lh-normal: normal; // line-height depends of font-family, font-size, your browser, maybe your OS http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ +$lh-088: 0.88; +$lh-100: 1; +$lh-115: 1.15; // original $title-lh-sm +$lh-125: 1.25; // original $title-lh +$lh-128: 1.28; +$lh-133: 1.33; // original $base-lh-sm +$lh-143: 1.43; // original $base-lh +$lh-145: 1.45; +$lh-150: 1.5; +$lh-188: 1.88; +$lh-192: 1.92; +$lh-200: 2; +$lh-236: 2.36; +$lh-500: 5; // Work Sans @include font-face("worksans", "WorkSans-Thin", "100"); diff --git a/frontend/resources/styles/common/dependencies/reset.scss b/frontend/resources/styles/common/dependencies/reset.scss index 1fc96a150..6092943ca 100644 --- a/frontend/resources/styles/common/dependencies/reset.scss +++ b/frontend/resources/styles/common/dependencies/reset.scss @@ -97,7 +97,7 @@ video { border: 0; font: inherit; font-size: 100%; - line-height: $base-lh; + line-height: $lh-143; margin: 0; padding: 0; text-decoration: none; @@ -118,7 +118,7 @@ section { display: block; } body { - line-height: 1; + line-height: $lh-100; } ol, diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 7475cc951..529a19b77 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -500,7 +500,7 @@ input[type="radio"], input[type="checkbox"] { box-sizing: border-box; cursor: pointer; - line-height: normal; + line-height: $lh-normal; margin-top: 1px 0 0; } diff --git a/frontend/resources/styles/main/layouts/not-found.scss b/frontend/resources/styles/main/layouts/not-found.scss index 4aa400cbb..d9cda8242 100644 --- a/frontend/resources/styles/main/layouts/not-found.scss +++ b/frontend/resources/styles/main/layouts/not-found.scss @@ -47,7 +47,7 @@ .main-message { color: $color-black; font-size: $fs80; - line-height: 150px; + line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => lh-188 (rounded) text-align: center; } diff --git a/frontend/resources/styles/main/partials/af-signup-questions.scss b/frontend/resources/styles/main/partials/af-signup-questions.scss index 468d76e85..80925292a 100644 --- a/frontend/resources/styles/main/partials/af-signup-questions.scss +++ b/frontend/resources/styles/main/partials/af-signup-questions.scss @@ -115,7 +115,7 @@ font-family: "worksans", sans-serif !important; font-size: $fs12; height: 1.5rem; - line-height: 1.5rem; + line-height: $lh-200; // Original value was 1.5rem = 24px; 24px/12px = 200% => lh-200 text-align: center; width: 2.5rem !important; } diff --git a/frontend/resources/styles/main/partials/comments.scss b/frontend/resources/styles/main/partials/comments.scss index fa1f85b87..b2d89ce3f 100644 --- a/frontend/resources/styles/main/partials/comments.scss +++ b/frontend/resources/styles/main/partials/comments.scss @@ -411,7 +411,7 @@ font-weight: $fw400; color: $color-black; font-size: $fs14; - line-height: $fs18; + line-height: $lh-128; // Original value was $fs18 => 1.125rem = 18px; 18px/14px = 128.571428571% => $lh-128 (rounded) flex-grow: 1; } diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index 7419ce4e4..0765863d4 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -133,7 +133,7 @@ text-overflow: ellipsis; width: 100%; white-space: nowrap; - line-height: 27px; + line-height: $lh-192; // Original value was 27px; 27px/14px = 192.857142857% => $lh-192 (rounded) max-width: 260px; @media #{$bp-max-1366} { max-width: 230px; diff --git a/frontend/resources/styles/main/partials/dashboard-settings.scss b/frontend/resources/styles/main/partials/dashboard-settings.scss index 8dc64119b..0476df978 100644 --- a/frontend/resources/styles/main/partials/dashboard-settings.scss +++ b/frontend/resources/styles/main/partials/dashboard-settings.scss @@ -85,7 +85,7 @@ border-radius: 50%; font-size: $fs24; color: $color-white; - line-height: 120px; + line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500 text-align: center; background: $color-primary-dark; z-index: 14; diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss index 34c733725..5efa8efb3 100644 --- a/frontend/resources/styles/main/partials/dashboard.scss +++ b/frontend/resources/styles/main/partials/dashboard.scss @@ -239,7 +239,7 @@ h2 { cursor: pointer; font-size: $fs18; - line-height: 1rem; + line-height: $lh-088; // Original value was 1rem = 16px; 16px/18px = 88.88888% => $lh-088 font-weight: $fw600; color: $color-black; margin-right: $size-1; @@ -251,7 +251,7 @@ .info { font-size: $fs14; - line-height: 1rem; + line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115 (rounded) font-weight: $fw400; color: $color-gray-60; margin-left: 0.75rem; @@ -333,7 +333,7 @@ .recent-files-row-title-info { color: $color-gray-60; - line-height: 1rem; + line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115 font-size: $fs14; font-weight: $fw400; @media (max-width: 880px) { @@ -484,9 +484,8 @@ border: none; cursor: pointer; height: 58px; - display: inline-block; - line-height: 58px; - text-align: center; + display: inline-flex; + align-items: center; border-top: 2px solid #e4e4e4; border-left: 2px solid #e4e4e4; border-right: 2px solid #e4e4e4; @@ -499,7 +498,7 @@ span { display: inline-block; vertical-align: middle; - line-height: normal; + line-height: $lh-normal; font-size: $fs18; font-weight: $fw600; color: $color-black; @@ -523,12 +522,13 @@ border: 2px solid #e0e4e9; border-radius: 50%; text-align: center; - line-height: 35px; width: 35px; height: 35px; cursor: pointer; background-color: $color-white; - + display: flex; + align-items: center; + justify-content: center; svg { width: 12px; height: 12px; diff --git a/frontend/resources/styles/main/partials/exception-page.scss b/frontend/resources/styles/main/partials/exception-page.scss index 310fc7753..3ffd4ca1b 100644 --- a/frontend/resources/styles/main/partials/exception-page.scss +++ b/frontend/resources/styles/main/partials/exception-page.scss @@ -50,7 +50,7 @@ .main-message { color: $color-black; font-size: $fs80; - line-height: 150px; + line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => $lh-188 (rounded) text-align: center; } diff --git a/frontend/resources/styles/main/partials/forms.scss b/frontend/resources/styles/main/partials/forms.scss index 4a50a01a3..e3959df3b 100644 --- a/frontend/resources/styles/main/partials/forms.scss +++ b/frontend/resources/styles/main/partials/forms.scss @@ -276,7 +276,7 @@ textarea { max-width: 85%; overflow: hidden; text-overflow: ellipsis; - line-height: 16px; + line-height: $lh-115; // Original value was 16px; 16px/14px = 114.285714286% => $lh-115 (rounded) font-size: $fs14; color: $color-black; } diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 95f8e4eb2..17f67146a 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -520,7 +520,7 @@ h3, p { font-size: $fs12; - line-height: 1.5; + line-height: $lh-150; margin: 0; color: $color-black; padding: 0; @@ -2024,7 +2024,7 @@ h2 { font-size: $fs24; color: $color-black; - line-height: $fs36; + line-height: $lh-150; // Original value was 2.25rem = 36px; 36px/24px = 150% => $lh-150 letter-spacing: 0px; margin: 0 30px 20px 0; } diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 6c77948fa..187a812ac 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -895,7 +895,7 @@ border-radius: $br2; color: $color-gray-20; font-size: $fs11; - line-height: 16px; + line-height: $lh-145; // Original value was 16px; 16px/11px = 145.454545455% => $lh-145 flex-grow: 1; padding: 0.25rem 0; diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index 58ef96f76..33e7b435b 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -404,7 +404,7 @@ span.element-name { } .active-filters { margin-top: 5px; - line-height: 26px; + line-height: 26px; // Original value was 26px; 26px/11px = 236.363636364% => $lh-236 (rounded) font-size: $fs11; margin: 0 0.5rem; span { diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index f6e4a903e..4d71965e7 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -189,7 +189,7 @@ .empty { color: $color-gray-20; font-size: $fs12; - line-height: 1.5; + line-height: $lh-150; text-align: center; padding: 0 15px; display: flex; diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss index 8e2f78651..8fd19383f 100644 --- a/frontend/resources/styles/main/partials/user-settings.scss +++ b/frontend/resources/styles/main/partials/user-settings.scss @@ -119,7 +119,7 @@ border-radius: 50%; font-size: $fs24; color: $color-white; - line-height: 120px; + line-height: $lh-500; // Original value was 120px; 120px/24px =500% => $lh-500 text-align: center; background: $color-primary-dark; z-index: 14; diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 7385faecb..b1a04a6d8 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -352,7 +352,7 @@ $height-palette-max: 80px; align-items: center; height: 20px; font-size: $fs12; - line-height: 1.5; + line-height: $lh-150; } .viewport-actions {