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
#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.

Author: silverwind

.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

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"}}

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>

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>

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>

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}}

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>

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">

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;

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;
 }