From b00c2ad2ff2a4ccb5369225ffa707e6ef50ac813 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 24 Jun 2024 18:12:52 +0100 Subject: [PATCH] Align font weights and font sizes (#9393) * Init * Update _theme.scss * Update _theme.scss * Update _style.scss * Update _tooltips.scss --- war/src/main/scss/abstracts/_theme.scss | 4 ++-- war/src/main/scss/base/_style.scss | 2 +- war/src/main/scss/components/_dialogs.scss | 6 +++--- war/src/main/scss/components/_spinner.scss | 4 ++-- war/src/main/scss/components/_table.scss | 5 ++--- war/src/main/scss/components/_tabs.scss | 4 ++-- war/src/main/scss/components/_tooltips.scss | 2 +- war/src/main/scss/form/_search-bar.scss | 5 ++--- war/src/main/scss/pages/_about.scss | 4 ++-- war/src/main/scss/pages/_dashboard.scss | 2 +- war/src/main/scss/pages/_icon-legend.scss | 2 +- 11 files changed, 19 insertions(+), 21 deletions(-) diff --git a/war/src/main/scss/abstracts/_theme.scss b/war/src/main/scss/abstracts/_theme.scss index bb272b106323..8bb1a6024169 100644 --- a/war/src/main/scss/abstracts/_theme.scss +++ b/war/src/main/scss/abstracts/_theme.scss @@ -39,7 +39,7 @@ $semantics: ( --font-size-base: 1rem; // 16px --font-size-sm: 0.875rem; // 14px --font-size-xs: 0.75rem; // 12px - --font-size-monospace: 0.95em; + --font-size-monospace: 1em; // Line height --line-height-base: 1.5; @@ -197,7 +197,7 @@ $semantics: ( --link-text-decoration: none; --link-text-decoration--hover: underline; --link-text-decoration--active: underline; - --link-font-weight: 500; + --link-font-weight: 450; // Tooltips --tooltip-backdrop-filter: contrast(0.6) brightness(2.4) saturate(2) diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss index 780aa7dd35ff..e586248d18a8 100644 --- a/war/src/main/scss/base/_style.scss +++ b/war/src/main/scss/base/_style.scss @@ -155,7 +155,7 @@ pre { background-color: var(--pre-background); color: var(--pre-color); font-family: var(--font-family-mono); - font-weight: 500; + font-weight: 400; line-height: 1.66; a { diff --git a/war/src/main/scss/components/_dialogs.scss b/war/src/main/scss/components/_dialogs.scss index a53831e5acb1..3de2d0c883a0 100644 --- a/war/src/main/scss/components/_dialogs.scss +++ b/war/src/main/scss/components/_dialogs.scss @@ -19,8 +19,8 @@ $jenkins-dialog-padding: 1.3rem; } &__title { - font-size: 1.1rem; - font-weight: 600; + font-size: 1.125rem; + font-weight: 500; padding: 0 $jenkins-dialog-padding; color: var(--text-color); } @@ -58,7 +58,7 @@ $jenkins-dialog-padding: 1.3rem; &__subtitle { font-size: 1rem; - font-weight: 600; + font-weight: 500; color: var(--text-color-secondary); padding: 0; margin: 0 0 1rem; diff --git a/war/src/main/scss/components/_spinner.scss b/war/src/main/scss/components/_spinner.scss index a538e89c355c..af5732ca8320 100644 --- a/war/src/main/scss/components/_spinner.scss +++ b/war/src/main/scss/components/_spinner.scss @@ -2,8 +2,8 @@ position: relative; display: inline-flex; align-items: center; - font-size: 0.85rem; - font-weight: 600; + font-size: 0.875rem; + font-weight: 500; margin: 0; &::before, diff --git a/war/src/main/scss/components/_table.scss b/war/src/main/scss/components/_table.scss index 73b033f0c1b6..126c05d6a12a 100644 --- a/war/src/main/scss/components/_table.scss +++ b/war/src/main/scss/components/_table.scss @@ -24,8 +24,8 @@ padding-top: calc((var(--table-padding) * 1.7) - 7.5px); padding-bottom: calc((var(--table-padding) * 1.7) - 2.5px); padding-left: 1.6rem; - font-weight: 600; - font-size: 0.85rem; + font-weight: 500; + font-size: 0.875rem; &[align="center"] { text-align: center; @@ -69,7 +69,6 @@ background: var(--table-body-background); vertical-align: middle; padding: var(--table-padding) 0 var(--table-padding) 1.6rem; - font-weight: 500; height: 3rem; &:first-of-type { diff --git a/war/src/main/scss/components/_tabs.scss b/war/src/main/scss/components/_tabs.scss index 565d62e2f81a..a41b56109f4d 100644 --- a/war/src/main/scss/components/_tabs.scss +++ b/war/src/main/scss/components/_tabs.scss @@ -28,8 +28,8 @@ border-radius: 100px; background: var(--tabs-item-background); color: var(--tabs-item-foreground); - font-weight: 600; - font-size: 0.85rem; + font-weight: 500; + font-size: 0.875rem; transition: var(--standard-transition); cursor: pointer; diff --git a/war/src/main/scss/components/_tooltips.scss b/war/src/main/scss/components/_tooltips.scss index 80a030b8c9c3..d864f98bd941 100644 --- a/war/src/main/scss/components/_tooltips.scss +++ b/war/src/main/scss/components/_tooltips.scss @@ -3,7 +3,7 @@ padding: 0.45rem 0.8rem; border-radius: 0.66rem; box-shadow: var(--tooltip-box-shadow); - font-weight: 550; + font-weight: 500; font-size: 0.75rem; line-height: 1.6; max-width: min(50vw, 1000px) !important; diff --git a/war/src/main/scss/form/_search-bar.scss b/war/src/main/scss/form/_search-bar.scss index 0a04e25b331c..ed552e85c987 100644 --- a/war/src/main/scss/form/_search-bar.scss +++ b/war/src/main/scss/form/_search-bar.scss @@ -21,7 +21,6 @@ 0 0 0 2px transparent, 0 0 0 12px transparent; transition: var(--standard-transition); - font-weight: 450; height: var(--search-bar-height); &::placeholder { @@ -142,7 +141,7 @@ justify-content: center; transition: 0.25s ease; text-align: center; - font-size: 0.8em; + font-size: 0.6875rem; font-weight: 500; line-height: 1; color: var(--text-color-secondary); @@ -257,7 +256,7 @@ align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; - font-size: 0.85rem; + font-size: 0.875rem; border-radius: 10px; color: var(--text-color); font-weight: 500; diff --git a/war/src/main/scss/pages/_about.scss b/war/src/main/scss/pages/_about.scss index 08be61408749..b39fc84e4cd9 100644 --- a/war/src/main/scss/pages/_about.scss +++ b/war/src/main/scss/pages/_about.scss @@ -124,13 +124,13 @@ } .app-about-version { - font-weight: 600; + font-weight: 500; color: var(--text-color-secondary); margin: 0; } .app-about-paragraph { - font-size: 1.1rem; + font-size: 1.125rem; margin-bottom: var(--section-padding); font-weight: 500; } diff --git a/war/src/main/scss/pages/_dashboard.scss b/war/src/main/scss/pages/_dashboard.scss index cb029a9861a9..3ace60fac309 100644 --- a/war/src/main/scss/pages/_dashboard.scss +++ b/war/src/main/scss/pages/_dashboard.scss @@ -121,7 +121,7 @@ $min-button-size: 36px; &__label { color: var(--link-color); - font-weight: 600; + font-weight: 500; margin: 0; font-size: 1rem; } diff --git a/war/src/main/scss/pages/_icon-legend.scss b/war/src/main/scss/pages/_icon-legend.scss index 02cb37cff584..9d62a5c084aa 100644 --- a/war/src/main/scss/pages/_icon-legend.scss +++ b/war/src/main/scss/pages/_icon-legend.scss @@ -23,7 +23,7 @@ dd { margin: 0; padding: 0; - font-size: 0.95rem; + font-size: 0.9375rem; font-weight: 500; line-height: 1.6; }