Align font weights and font sizes (#9393)

* Init * Update _theme.scss * Update _theme.scss * Update _style.scss * Update _tooltips.scss
jenkinsci · Jun 24, 2024 · b00c2ad · b00c2ad
1 parent 654cfd4
commit b00c2ad
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,7 +23,7 @@
   dd {
     margin: 0;
     padding: 0;
-    font-size: 0.95rem;
+    font-size: 0.9375rem;
     font-weight: 500;
     line-height: 1.6;
   }