Change `--font-weight-bold` to `--font-weight-semibold` and 600 value, introduce new font weight variables (#24827)

There was some recent discussion about this in Discord `ui-design`
channel and the conclusion was that
https://github.com/go-gitea/gitea/issues/24305 should have fixed their
OS font installation to have semibold weights.

I have now tested this 601 weight on a Windows 10 machine on Firefox
myself, and I immediately noticed that bold was excessivly bold and
rendering as 700 because browsers are biased towards bolder fonts. So
revert this back to the previous value.

26 files changed, 82 insertions, 78 deletions

diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
index c6289fe261..7dad9d0594 100644
--- a/.stylelintrc.yaml
+++ b/.stylelintrc.yaml
@@ -96,7 +96,7 @@ rules:
   property-no-vendor-prefix: null
   rule-empty-line-before: null
   rule-selector-property-disallowed-list: null
-  scale-unlimited/declaration-strict-value: [[color, background-color, border-color], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
+  scale-unlimited/declaration-strict-value: [[color, background-color, border-color, font-weight], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
   selector-attribute-name-disallowed-list: null
   selector-attribute-operator-allowed-list: null
   selector-attribute-operator-disallowed-list: null
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 740b39dbd5..292a7dd2bd 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -97,7 +97,7 @@
 											{{svg "octicon-chevron-down" 18}}
 										{{end}}
 									</button>
-									<div class="gt-bold gt-df gt-ac gt-mono">
+									<div class="gt-font-semibold gt-df gt-ac gt-mono">
 										{{if $file.IsBin}}
 											<span class="gt-ml-1 gt-mr-3">
 												{{$.locale.Tr "repo.diff.bin"}}
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index f301261533..50f0c903ae 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -11,7 +11,7 @@
 		<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
 			<div class="comment-header-left gt-df gt-ac">
 				{{if .OriginalAuthor}}
-					<span class="text black gt-bold gt-mr-2">
+					<span class="text black gt-font-semibold gt-mr-2">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
 					</span>
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index c54b29dcd6..3c60eca671 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -23,7 +23,7 @@
 					<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
 						<div class="comment-header-left gt-df gt-ac">
 							{{if .Issue.OriginalAuthor}}
-								<span class="text black gt-bold">
+								<span class="text black gt-font-semibold">
 									{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
 									{{.Issue.OriginalAuthor}}
 								</span>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 32ce8bad94..b65ebc68a2 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -27,7 +27,7 @@
 					<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
 						<div class="comment-header-left gt-df gt-ac">
 							{{if .OriginalAuthor}}
-								<span class="text black gt-bold gt-mr-2">
+								<span class="text black gt-font-semibold gt-mr-2">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
@@ -420,7 +420,7 @@
 								{{end}}
 								<span class="text grey muted-links">
 									{{if .OriginalAuthor}}
-										<span class="text black gt-bold">
+										<span class="text black gt-font-semibold">
 											{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 											{{.OriginalAuthor}}
 										</span>
@@ -548,7 +548,7 @@
 																{{end}}
 																<span class="text grey muted-links">
 																	{{if .OriginalAuthor}}
-																		<span class="text black gt-bold">
+																		<span class="text black gt-font-semibold">
 																			{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 																			{{.OriginalAuthor}}
 																		</span>
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index def6beccb9..bfe5a20b16 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -28,7 +28,7 @@
 			{{range .LanguageStats}}
 			<div class="item gt-df gt-ac gt-jc">
 				<i class="color-icon gt-mr-3" style="background-color: {{.Color}}"></i>
-				<span class="gt-bold gt-mr-3">
+				<span class="gt-font-semibold gt-mr-3">
 					{{if eq .Language "other"}}
 						{{$.locale.Tr "repo.language_other"}}
 					{{else}}
diff --git a/templates/shared/user/authorlink.tmpl b/templates/shared/user/authorlink.tmpl
index 4e45fdfd0f..71cbb8676e 100644
--- a/templates/shared/user/authorlink.tmpl
+++ b/templates/shared/user/authorlink.tmpl
@@ -1 +1 @@
-<a class="author text black gt-bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
+<a class="author text black gt-font-semibold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/templates/user/settings/account.tmpl b/templates/user/settings/account.tmpl
index 451b0ca0e0..97c35fc7dc 100644
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@@ -137,7 +137,7 @@
 			<div class="ui red message">
 				<p class="text left">{{svg "octicon-alert"}} {{.locale.Tr "settings.delete_prompt" | Str2html}}</p>
 				{{if .UserDeleteWithComments}}
-				<p class="text left" style="font-weight: bold;">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
+				<p class="text left gt-font-semibold">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
 				{{end}}
 			</div>
 			<form class="ui form ignore-dirty" id="delete-form" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index e7dc2ec533..617462542a 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -32,7 +32,7 @@
 }
 
 .admin dl.admin-dl-horizontal dt {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   width: 220px;
   margin-right: 5px;
   overflow: hidden;
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 6c6c5381ad..eb12ffef7a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -3,10 +3,11 @@
   --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
   --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
   --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
-  /* "font-weight: bold" starts from 700, some fonts do not provide "bolding" for weight 600. */
-  /* But some users consider "700" is too heavy, so use 601, which is when Segoe UI on Linux */
-  /* starts bolding. */
-  --font-weight-bold: 601;
+  /* font weights - use between 400 and 600 for general purposes */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@@ -218,7 +219,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 body {
@@ -891,7 +892,7 @@ a.label,
 .ui.dropdown .menu .active.item {
   color: var(--color-text);
   background: var(--color-active);
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 /* fix misaligned images in webhook dropdown */
@@ -1436,7 +1437,7 @@ img.ui.avatar,
 }
 
 .ui.form .ui.button {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui.floating.label {
@@ -1494,7 +1495,7 @@ img.ui.avatar,
 }
 
 .ui .text.normal {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .text.italic {
@@ -1509,7 +1510,7 @@ img.ui.avatar,
 }
 
 .ui .text.thin {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .text.middle {
@@ -1546,7 +1547,7 @@ img.ui.avatar,
 }
 
 .ui .normal.header {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .form .autofill-dummy {
@@ -1565,7 +1566,7 @@ img.ui.avatar,
   font-family: var(--fonts-monospace);
   font-size: 13px;
   padding: 6px 10px 4px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   margin: 0 6px;
 }
 
@@ -1592,7 +1593,7 @@ img.ui.avatar,
 
 .ui.inline.delete-button {
   padding: 8px 15px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .background.red {
@@ -1736,7 +1737,7 @@ img.ui.avatar,
 }
 
 .scrolling.menu .item.selected {
-  font-weight: var(--font-weight-bold) !important;
+  font-weight: var(--font-weight-semibold) !important;
 }
 
 .ui.dropdown .scrolling.menu {
@@ -2486,7 +2487,7 @@ a.ui.basic.label:hover {
 
 .ui.attached.header .right .button {
   padding: 8px 10px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 /* reduce height of buttons with dropdown icon */
@@ -2534,7 +2535,7 @@ a.ui.basic.label:hover {
   padding: 2.75px;
   border-radius: 1em;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   line-height: .67em;
 }
 
@@ -2614,7 +2615,7 @@ table th[data-sortt-desc] .svg {
   font-size: 1.25em;
   line-height: 1;
   font-style: normal !important;
-  font-weight: normal !important;
+  font-weight: var(--font-weight-normal) !important;
   vertical-align: -0.075em;
 }
 
@@ -2721,7 +2722,7 @@ table th[data-sortt-desc] .svg {
 .ellipsis-button {
   padding: 0 5px 8px !important;
   display: inline-block !important;
-  font-weight: var(--font-weight-bold) !important;
+  font-weight: var(--font-weight-semibold) !important;
   line-height: 6px !important;
   vertical-align: middle !important;
 }
diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css
index f1db1993fe..26d128775f 100644
--- a/web_src/css/chroma/base.css
+++ b/web_src/css/chroma/base.css
@@ -41,7 +41,7 @@
 
 /* GenericStrong */
 .chroma .gs {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* GenericUnderline */
diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css
index eb5c5d13b8..cfdf074f8e 100644
--- a/web_src/css/editor/combomarkdowneditor.css
+++ b/web_src/css/editor/combomarkdowneditor.css
@@ -91,7 +91,7 @@ text-expander .suggestions li {
   align-items: center;
   cursor: pointer;
   padding: 4px 8px;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }
 
 text-expander .suggestions li + li {
@@ -115,7 +115,7 @@ text-expander .suggestions li:hover {
 }
 
 text-expander .suggestions .fullname {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   margin-left: 4px;
   color: var(--color-text-light-1);
 }
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css
index 244ec5a96f..85d04575d9 100644
--- a/web_src/css/features/imagediff.css
+++ b/web_src/css/features/imagediff.css
@@ -26,7 +26,7 @@
 }
 
 .image-diff-container .diff-side-by-side .side .side-header {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .image-diff-container .diff-swipe {
diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css
index b7b0a25509..76e3138b65 100644
--- a/web_src/css/features/tribute.css
+++ b/web_src/css/features/tribute.css
@@ -15,7 +15,7 @@
 }
 
 .tribute-container li span.fullname {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   font-size: 0.8rem;
   margin-left: 3px;
 }
diff --git a/web_src/css/font_i18n.css b/web_src/css/font_i18n.css
index e3de906532..187fa292c7 100644
--- a/web_src/css/font_i18n.css
+++ b/web_src/css/font_i18n.css
@@ -51,7 +51,7 @@
     local("SourceHanSans-Light"), local("Yu Gothic Regular"),
     local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -66,7 +66,7 @@
     local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
     local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -81,7 +81,7 @@
     local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
     local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -95,7 +95,7 @@
     local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
     local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
     local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -124,7 +124,7 @@
     local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -137,7 +137,7 @@
     local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -150,7 +150,7 @@
     local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -163,7 +163,7 @@
     local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
     local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
     local("Heiti SC Medium"), local("SimHei");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -192,7 +192,7 @@
     local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -205,7 +205,7 @@
     local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -218,7 +218,7 @@
     local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -231,7 +231,7 @@
     local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
     local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
     local("Heiti TC Medium"), local("PMingLiU");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -262,7 +262,7 @@
     local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -277,7 +277,7 @@
     local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -292,7 +292,7 @@
     local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -307,7 +307,7 @@
     local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
     local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
     local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -335,7 +335,7 @@
     local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
     local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
     local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -347,7 +347,7 @@
     local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
     local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
     local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -359,7 +359,7 @@
     local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
     local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
     local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -371,7 +371,7 @@
     local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
     local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
     local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index d84fd4ba80..a415670afe 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -29,8 +29,6 @@ Gitea's private styles use `g-` prefix.
   font-size: .95em !important; /* compensate for monospace fonts being usually slightly larger */
 }
 
-.gt-bold { font-weight: var(--font-weight-bold) !important; }
-
 .gt-word-break {
   word-wrap: break-word !important;
   word-break: break-word; /* compat: Safari */
@@ -86,6 +84,11 @@ Gitea's private styles use `g-` prefix.
 .gt-float-left { float: left !important; }
 .gt-float-right { float: right !important; }
 
+.gt-font-light { font-weight: var(--font-weight-light) !important };
+.gt-font-normal { font-weight: var(--font-weight-normal) !important };
+.gt-font-medium { font-weight: var(--font-weight-medium) !important };
+.gt-font-semibold { font-weight: var(--font-weight-semibold) !important };
+
 .gt-rounded { border-radius: var(--border-radius) !important; }
 .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
 .gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
diff --git a/web_src/css/install.css b/web_src/css/install.css
index d99805b80f..a65a213fd5 100644
--- a/web_src/css/install.css
+++ b/web_src/css/install.css
@@ -55,7 +55,7 @@
   margin: 20px auto;
   color: var(--color-red);
   text-align: left;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .page-content.install .ui .reinstall-confirm {
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index fb1e8ea630..e300995b31 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -74,7 +74,7 @@
 .markup h6 {
   margin-top: 24px;
   margin-bottom: 16px;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   line-height: 1.25;
 }
 
@@ -252,7 +252,7 @@
   margin-top: 16px;
   font-size: 1em;
   font-style: italic;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .markup dl dd {
@@ -284,7 +284,7 @@
 }
 
 .markup table th {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .markup table th,
diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css
index c0f7e83037..eba14ab334 100644
--- a/web_src/css/modules/card.css
+++ b/web_src/css/modules/card.css
@@ -56,7 +56,7 @@
 
 .ui.cards > .card > .content > .header:not(.ui),
 .ui.card > .content > .header:not(.ui) {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   font-size: 1.28571429em;
   margin-top: -.21425em;
   line-height: 1.28571429em;
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 5a90c0852f..ae50bce0ed 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -61,7 +61,7 @@
 
 .ui.comments .comment .author {
   font-size: 1em;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }
 
 .ui.comments .comment a.author {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index ddcc258be9..dbf9bf79bd 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -230,7 +230,7 @@
 .repository.file.list #repo-files-table thead th {
   padding-top: 8px;
   padding-bottom: 5px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .repository.file.list #repo-files-table thead .ui.avatar {
@@ -627,7 +627,7 @@
   align-items: center;
   flex: 1;
   width: 100%;
-  font-weight: 300;
+  font-weight: var(--font-weight-normal);
   font-size: 32px;
   line-height: 40px;
   margin: 0;
@@ -1305,7 +1305,7 @@
 }
 
 .repository.commits .header .search input {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   padding: 5px 10px;
 }
 
@@ -1533,7 +1533,7 @@
 }
 
 .repository .data-table th {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   background: var(--color-box-header);
   border-top: 0;
 }
@@ -1880,7 +1880,7 @@
 }
 
 .repository.quickstart .guide .item small {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .repository.quickstart .guide .clone.button:first-child {
@@ -1991,7 +1991,7 @@
 }
 
 .repository.settings.branches .branch-protection .status-check-matched-mark {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   font-style: italic;
 }
 
@@ -2185,7 +2185,7 @@
   border-radius: 0;
   margin: 0;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   border-color: var(--color-secondary) !important;
   background: var(--color-reaction-bg);
 }
@@ -2347,7 +2347,7 @@
 .user-cards .list .item .name {
   margin-top: 0;
   margin-bottom: 0;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .user-cards .list .item .meta {
@@ -2465,7 +2465,7 @@
   border: none !important;
   background: var(--color-box-header);
   border-bottom: 1px solid var(--color-secondary) !important;
-  font-weight: normal !important;
+  font-weight: var(--font-weight-normal) !important;
   padding: 0.5rem 1rem;
   margin: 0 !important;
   position: relative;
@@ -2828,7 +2828,7 @@ tbody.commit-list {
 }
 
 #repo-topics .repo-topic {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   cursor: pointer;
   margin: 2px;
 }
@@ -2933,7 +2933,7 @@ tbody.commit-list {
 }
 
 .resolved-placeholder {
-  font-weight: normal !important;
+  font-weight: var(--font-weight-normal) !important;
   border: 1px solid var(--color-secondary) !important;
   border-radius: var(--border-radius) !important;
   margin: 4px !important;
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index 700ac46c21..e786e5ff59 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -6,7 +6,7 @@
 
 .repository.releases #release-list .release-list-title {
   font-size: 2rem;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   margin-top: -4px;
   margin-bottom: 0;
 }
@@ -87,7 +87,7 @@
 
 .repository.tags #tags-table .release-tag-name {
   font-size: 18px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .repository.new.release .target {
diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index db0d4cfbb9..89e1135ce9 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -33,7 +33,7 @@
   color: var(--color-text);
   font-size: 16px;
   min-width: 0;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .issue.list > .item .issue-item-top-row a.index {
diff --git a/web_src/css/user.css b/web_src/css/user.css
index a7106599df..252e595f3b 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -1,6 +1,6 @@
 .user.profile .ui.card .header {
   display: block;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   font-size: 1.3rem;
   margin-top: -0.2rem;
   line-height: 1.3rem;
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index a434eee436..0fd22ca9b6 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -74,7 +74,7 @@
             <a class="repo-list-link muted gt-df gt-ac gt-sb" :href="repo.link">
               <div class="item-name gt-df gt-ac gt-f1">
                 <svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
-                <div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
+                <div class="text gt-font-semibold truncate gt-ml-1">{{ repo.full_name }}</div>
                 <span v-if="repo.archived">
                   <svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
                 </span>
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 780f5e6c28..8ab7616892 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -1,7 +1,7 @@
 <template>
   <ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="fileListIsVisible">
     <li v-for="file in files" :key="file.NameHash">
-      <div class="gt-bold gt-df gt-ac pull-right">
+      <div class="gt-font-semibold gt-df gt-ac pull-right">
         <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ binaryFileMessage }}</span>
         {{ file.IsBin ? '' : file.Addition + file.Deletion }}
         <span v-if="!file.IsBin" class="diff-stats-bar gt-mx-3" :data-tooltip-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">